Since directive templates must have exactly one html root element, template: "item"
is not valid. It has to be at least something like template: '<span>item</span>'
, which produces:
<div>
contains
<p>
<span>item</span>
<span>item</span>
<span>item</span>
</p>
</div>
The two directives are:
app.directive('container', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div>contains <p ng-transclude></p></div>'
};
});
app.directive('item', function() {
return {
restrict: 'E',
replace: true,
template: '<span>item</span>'
};
});