angularjs 实例_AngularJS包含示例教程

最新推荐文章于 2024-05-27 09:42:21 发布

cunchi4221

最新推荐文章于 2024-05-27 09:42:21 发布

阅读量379

点赞数

文章标签： vue javascript python java js ViewUI

原文链接：https://www.journaldev.com/7514/angularjs-transclusion-example-tutorial

版权

angularjs 实例

Earlier we looked at custom directives and in this tutorial, we will discuss about the transclusion in directives.

前面我们讨论了自定义指令，在本教程中，我们将讨论指令中的包含。

Transclusion means the inclusion of the content of one document in another document by reference (wikipedia).

包含是指通过引用将一个文档的内容包含在另一文档中（维基百科）。

Transclusion provides a way to pass in templates to a directive and it is displayed. In the previous tutorials, we have used the template property to display the desirable templates.

包含提供了一种将模板传递给指令并显示它的方法。在先前的教程中，我们使用template属性显示所需的模板。

Let us look at the below example to see what happens if we define a template inside the directive element.
In the following example, we have created a directive called myEmployee that displays a template.

让我们看下面的示例，看看如果在指令元素内定义模板会发生什么。
在以下示例中，我们创建了一个名为myEmployee的指令，该指令显示模板。

app.js

var app = angular.module('mainApp', []);

app.directive('myEmployee', function() {

  return {
      restrict: 'EA',
      scope:{}, //isolate scope.
     template: "<div>My First Directive.</div>"
  };

});

We have included an element inside the my-employee directive in index.html file.

我们在index.html文件的my-employee指令中包含了一个元素。

app.js

<!DOCTYPE html>
<html>
    <head lang="en">
      <meta charset="utf-8">
      <title>AngularJS Transclusion</title>

    </head>
    <body>

      <div ng-app="mainApp">
        <my-employee>
          <div>Transcluded Element. This will not be displayed Since the transclude property is not enabled. </div>
        </my-employee>
     </div>
</div>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script type="text/javascript" src="app.js"></script>
    </body>
</html>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

The content inside my-employee directive is not displayed. AngularJS provides tranclude property to support the transclusion in directive. We will see this in the following section using the above example.

不显示my-employee指令中的内容。 AngularJS提供tranclude属性以支持指令中的包含。我们将在下面的部分中使用上述示例看到这一点。

指令示例中的包含 (Transclusion in Directive Example)

AngularJS provides two key features to support transclusion. The first one is a property that is used in directives named transclude and setting this to true enables the transclusion.The second is a directive named ng-transclude that is used to define where external content will be placed in a directive’s template. You can see the use of these two features in the following example.

AngularJS提供了两个主要功能来支持包含。第一个是在名为transclude的伪指令中使用的属性，并将其设置为true可启用转换；第二个是名为ng-transclude的伪指令，用于定义将外部内容放置在伪指令模板中的位置。在下面的示例中，您可以看到这两个功能的使用。

We have modified the above example to support transclusion simply by adding a transclude property to the myEmployee directive and it is set to true.

我们只需添加一个transclude属性将myEmployee指令修改上面的例子来支持transclusion并将它设置为true。

app.js

var app = angular.module('mainApp', []);

app.directive('myEmployee', function() {

  return {
      restrict: 'EA',
      scope:{}, //isolate scope.
     transclude:true,
     template: "<div ng-transclude></div><div>My First Directive.</div>"
  };

});

The ng-transclude is a directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. The template we pass in to the directive will replace the element with ng-transclude directive. In this example, we have replaced a div element without any content with meaningful div content.

ng-transclude是指示伪指令的指令，该插入点标记了使用包含的最接近父指示的被隐含DOM的插入点。我们传入指令的模板将用ng-transclude指令替换元素。在此示例中，我们用有意义的div内容替换了没有任何内容的div元素。

app.js

<!DOCTYPE html>
<html>
    <head lang="en">
      <meta charset="utf-8">
      <title>AngularJS Routing</title>

    </head>
    <body>

      <div ng-app="mainApp">
        <my-employee>
          <div>Transcluded Element. Transclude property is enabled.</div>
        </my-employee>
     </div>
</div>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script type="text/javascript" src="app.js"></script>
    </body>
</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

That’s all for now and we will see more AngularJS features in the coming posts.

目前仅此而已，我们将在以后的文章中看到更多AngularJS功能。

翻译自: https://www.journaldev.com/7514/angularjs-transclusion-example-tutorial

angularjs 实例

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 实例_AngularJS包含示例教程

angularjs 实例Earlier we looked at custom directives and in this tutorial, we will discuss about the transclusion in directives. 前面我们讨论了自定义指令，在本教程中，我们将讨论指令中的包含。 Transclusion means the inclusion of the...
复制链接

扫一扫