5

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?

1 Answer 1

12

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.