我如何使用transclusion在angularjs?如何使用、transclusion、angularjs

2023-09-13 04:54:11 作者:雨下的芭蕉

在约翰·林德奎斯特教程,transclusion是用来抓住从指令一些内容,并把它放在一个想要的位置。

In the John Lindquist tutorial, transclusion is used to grab some content from the directive and put it in a desired place.

但该文档谈translude功能,并将其传递给控制器​​和编译功能。那么,什么是transclusion以及如何使用它?

But the docs talk about translude function and passing it to controller and compile function. So, what is transclusion and how do I use it?

推荐答案

在创建基本指令,transclusion很简单:

When creating a basic directive, transclusion is easy:

module.directive( 'myTransDir', function () {
  return {
    transclude: true,
    scope: true,
    replace: true,
    template: '<div><h1>Hello!</h1><div ng-transclude></div></div>',
  };
});

由于模板包含 ngTransclude 指令,它会自动transclude的内容对我来说。如果我用这样的:

Because the template includes the ngTransclude directive, it will automatically transclude the contents for me. If I use it like this:

<div my-trans-dir>
  <p>Some Content</p>
</div>

生成的HTML将是:

The resultant HTML will be:

<div>
  <h1>Hello!</h1>
  <div>
    <p>Some Content</p>
  </div>
</div>