What is ng-transclude?

2019-01-09 22:12发布

站内问答 / 移动开发
577 2 5

I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman's terms what it is.

The description in the documentation is as follows:

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

This is fairly confusing. Would someone be able to explain in simple terms what ng-transclude is intended to do and where it might be used?

2条回答
地球回转人心会变
2楼-- · 2019-01-09 22:38

Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere(Where actually the ng-transclude is at) in the directive's template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives.

If you write a custom directive you use ng-transclude in the directive template to mark the point where you want to insert the contents of the element

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

If you put this in your markup 

<hero name="superman">Stuff inside the custom directive</hero>

It would show up like:

Superman

Stuff inside the custom directive

Full example :

Index.html 

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

enter image description here

Visualize :

enter image description here

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
3楼-- · 2019-01-09 22:43

it's a kind of yield, everything from the element.html() gets rendered there but the directive attributes still visible in the certain scope.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)