I have been trying to implement directives within other directives, but the results are not what I expected. Can anyone help me understand this code snippet:
var app = angular.module('blah', []);
app.directive('one', function() {
return {
restrict: 'E',
replace: true,
template: '<outer>one</outer>'
};
});
app.directive('two', function() {
return {
restrict: 'E',
replace: true,
template: '<outer>two</outer>'
};
});
app.directive('outer', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div ng-transclude></div>'
};
});
HTML:
<outer>whatever</outer>
<one></one>
<two></two>
<outer>something</outer>
The resulting DOM is:
<div ng-transclude=""></div>
<outer></outer>
<two></two>
<outer>something</outer>
JSFiddle: http://jsfiddle.net/WPpUL/
Is there an issue with the code?
EDIT:
Expected output DOM:
<div ng-transclude>whatever</div>
<div ng-transclude>one</div>
<div ng-transclude>two</div>
<div ng-transclude>something</div>