Why isn't the style being applied in this code snippet that uses ng-transclude? The transclusion function works fine, but for some reason the class .box is not applying to the span. Why could this be happening?
transclude.html looks like this:
<html ng-app="myApp">
<head>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/transclude.js" type="text/javascript"></script>
<style type="text/css">
.box{
background-color: red;
}
</style>
</head>
<body>
<div sidebox title="Links">
<ul>
<li>first link</li>
<li>2nd link</li>
</ul>
</div>
</body>
</html>
transclude.js looks like this:
var app = angular.module('myApp',[]);
app.directive('sidebox',function(){
return {
restrict:'A',
transclude:true,
scope:{
title:'@'
},
template:'<div>\n\
<h1>{{title}}</h1>\n\
<span class="box" ng-transclude></span></div>\n\
'
};
});
UPDATE:
It seems that the code did apply the .box class, but the div did not turn red as expected. See image https://i.sstatic.net/WZsi7.png.