What is ng-transclude?

后端未结

关注

 3  2024

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

相关标签:

3条回答

星月不相逢

2020-12-02 04:16

For those who come from React world, this is like React's {props.children}.

0 讨论(0)
发布评论:

提交评论
- 加载中...
猫巷女王i

2020-12-02 04:21

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)
发布评论:

提交评论
- 加载中...

孤独总比滥情好

2020-12-02 04:28

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

Visualize :

0 讨论(0)