Question

我是AngularJS的新手，在学习阶段，我遇到了ngTransclude，当我开始阅读文档http://docs.angularjs.org/api/ng/directive/ngTransclude时，我能够得到，真正做到的，

你们中的任何一个人，请告诉我实际上ngTransclude的作用，以及包含它时的变化是什么，何时它不包含在指令中。

请让我清楚地了解ngTransclude，重要性以及何时可以使用它。

Answer 1

我只想看到它工作：

http://plnkr.co/edit/liRDIEy9sWoSPSHJ1oln?p=preview

示例说明

将“ngTransclude”视为“保留元素内部的任何内容，即使在我重写之后”。它最常用于指令。以下面的例子为例，我定义了一个指令“emphasisize-text”，它实际上只是包装了我在“h1”元素中提供的内容。以下是该指令：

app.directive("emphasizeText", function () {
  return {
    restrict: 'E',
    transclude: true,
    template: '<h1 ng-transclude></h1>',
  }
});

现在，要在页面上使用它，以下html将运行良好：

<!-- transclude will keep text of course -->
<emphasize-text>Example With Just Text</emphasize-text>

<!-- transclude also keep html tags intact -->
<emphasize-text><i>Example With Italics Tag</i></emphasize-text>

<!-- translcude will even keep angular variables intact!  -->
<emphasize-text>
  <div>This is a first div</div>
  <div>This is a {{secondVariable}} div</div>
</emphasize-text>

如果你看看这个羽毛球（http://plnkr.co/edit/liRDIEy9sWoSPSHJ1oln?p=preview）。在输出中使用现代浏览器和“查看源代码”，您将看到正在发生的事情。标签保持精确，角度只是包装在“h1”！完全是我们想要的！

这里的关键是你可以在html中修改你想要的语义，行为或任何东西！就个人而言，我觉得这最适合自定义控件 - 不像我用它那样简单。事实上，我的例子可能是一个非常糟糕的例子，因为未来的程序员会知道“h1”比他们知道“强调文本”会变成什么要快得多。那就是说，你明白了。

快乐定制！

ngTransclude in AngularJS

1 个答案: