angularjs – 什么是ng转录？

发布时间：2020-12-17 09:31:10 所属栏目：安全来源：网络整理

导读：我已经看到了很多关于StackOverflow的讨论ng-transclude的问题，但没有解释在外行人的术语是什么。文档中的描述如下： Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. 这是相

我已经看到了很多关于StackOverflow的讨论ng-transclude的问题，但没有解释在外行人的术语是什么。

文档中的描述如下：

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

这是相当混乱。有人能够用简单的术语来解释ng-transclude是为了做什么，以及它可能在哪里使用？

Transclude是一个设置，告诉角度捕获在标记中的指令内部的所有内容，并在指令的模板中使用它在某处(实际上ng-transclude在哪里)。有关详细信息，请参阅创建包含其他元素的指令部分( documentation of directives)。

如果编写自定义指令，则在指令模板中使用ng-transclude来标记要插入元素内容的点

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

如果你把这个在你的标记

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

它会显示如下：

Superman

Stuff inside the custom directive

完整示例：

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',template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

输出标记

可视化：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!