Using ng-transclude and ng-include in a nested angular directive
angularjs, angularjs-directive
Solution
I think I managed to fix your problem, by changing two things. See it here: plunker.
When using `"@"` for a directive scope, the attribute is passed to the scope as a string, so you shouldn't put the value between simple quotes.
Also, I replaced `<div ng-include ng-src="{{template}}"/>` in the template with `<div ng-include="template"/>` because from the documentation, ng-include doesn't use src when used as an attribute (but I don't understand why it worked in your first example...)
Hope that helps anyway.
Problem
TL;DR: On this plunker, why does the second directive not render the included template? This example is simplified, but I actually have a usecase where doing what I am about to attempt makes sense. I have an Angular directive that uses ng-include to wrap a provided template into some other HTML using ng-include and and ng-transclude. It works fine on its own. ``` .directive('content', [function() { return { restrict: 'E', transclude: true, replace: true, controller: 'contentCtrl', template: '' + '<div class="foo">' + ' <div ng-transclude></div>' + '</div>', scope: { } }; }]) .directive('contentInner', [function() { return { restrict: 'E', require: '^content', transclude: true, replace: true, scope: { }, template: '' + '<div class="body">' + ' <div class="close" ng-click="close()">' + ' <i class="icon-remove-sign"></i>' + ' <span>Close</span>' + ' </div>' + ' <div ng-transclude ></div>' + '</div>', link: function(scope, element, attrs, controller) { scope.close = function() { controller.close(); }; } }; }]) ``` But then I have another directive that is trying to use this first directive and that's where it breaks down and fails silently. ``` .directive('box', ['$compile', function($compile) { return { restrict: 'E', replace: true, scope: { template: '@' }, template: '' + '<div>' + ' <content>' + ' <content-inner>' + ' <div ng-include ng-src="{{template}}"/>' + ' </content-inner>' + ' </conent>' + '</div>', link: function(scope, element) { //$compile(element)(scope); } }; }]); ``` Looking at the generated source I can see that it looks like this ``` <div template="'template.html'"> <div class="foo"> <div ng-transclude=""> <div class="body ng-scope"> <div class="close" ng-click="close()"> <i class="icon-remove-sign"></i> <span>Close</span> </div> <div ng-transclude=""> <div ng-include="" ng-src="'template.html'" class="ng-scope" src="'template.html'"> </div> </div> </div> </div> </div> </div> ``` So the reference to the template in the ng-include at the innermost level is there but it is not getting rendered. Plunker. So where did my template go in the second directive?