个人中心
gpt4 book ai didi

angularjs - 什么是 ng-transinclude？

转载 作者：行者123 更新时间：2023-12-03 04:05:03 24 4
gpt4 key购买 nike

我在 StackOverflow 上看到了很多讨论 ng-transclude 的问题，但没有一个问题能通俗地解释它是什么。

文档中的描述如下:

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

这相当令人困惑。有人能够用简单的术语解释 ng-transclude 的用途以及它可以在哪里使用吗？

最佳答案

Transclude 是一个设置，告诉 Angular 捕获标记中指令中放入的所有内容，并在某处使用它(实际上 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', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

输出标记

enter image description here

可视化:

enter image description here

关于angularjs - 什么是 ng-transinclude？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24725399/

24 4 0
文章推荐： intellij-idea - 将另一个 gradle 项目导入现有的 android 项目时，Android Studio 访问被拒绝
文章推荐： azure - 如何将 Identity_claim_appid_g 链接到 Azure Log Analytics 中的应用注册显示名称
文章推荐： 具有预定义值的 Azure Policy 标记
文章推荐： Angular2 dart DateTime 不输入保存？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com