本文共 4619 字,大约阅读时间需要 15 分钟。
We have discussed about a series of tutorials on and in the previous posts. Sometimes you may want to build a component that is built from a combination of directives. In this post, we are going to discuss this concept and the communication between the nested directives. There are many ways to communicate between directives but in this post, we are going to discuss about the communication that uses controller as an API.
在之前的文章中,我们讨论了有关和的一系列教程。 有时您可能想构建一个由指令组合构建的组件。 在本文中,我们将讨论这个概念以及嵌套指令之间的通信。 在指令之间进行通信的方法有很多,但是在本文中,我们将讨论使用controller作为API的通信。
You can create nested directives using the following syntax:
您可以使用以下语法创建嵌套指令:
var app = angular.module('moduleName', []); app.directive("First", function() { return { //code goes here }; }); app.directive("Second", function() { return { //code goes here }; }); app.directive("third", function() { return { //code goes here }; });
You can also use the following syntax to create the same. In this case we are not replicating the variable and use a dot(.) operator.
您还可以使用以下语法创建相同的语法。 在这种情况下,我们不复制变量,而是使用dot(。)运算符。
var app = angular.module('moduleName', []); app.directive("First", function() { return { //code goes here }; }) .directive("Second", function() { return { //code goes here }; }) .directive("Third", function() { return { //code goes here }; })
Let’s discuss this concept with the following example. In this post, we are going to create three directives shape
, triangle
and circle
让我们通过以下示例讨论此概念。 在这篇文章中,我们将创建三个指令shape
, triangle
和circle
shape
directive defines a controller with two functions to push values in to the shapes array. shape
指令定义了一个具有两个功能的控制器,用于将值推入shapes数组。 triangle
and circle
which contains a link function that calls the method in the shape’s directive controller. You can pass the controller as the fourth parameter. We use the name shapeCtrl in this example. You can choose any name. 然后,我们创建triangle
和circle
指令,其中包含一个链接函数,该函数在形状的指令控制器中调用该方法。 您可以将控制器作为第四个参数传递。 在此示例中,我们使用名称shapeCtrl 。 您可以选择任何名称。 link: function (scope, element, attrs, shapeCtrl) { shapeCtrl.triangle();}
require: '^shape'.
This line is responsible for the communication between the directives. The ^
prefix means that the directive searches for the controller on its parents. 您可能已经在示例中注意到这一行代码, require: '^shape' .
该行负责指令之间的通信。 前缀^
表示指令在其父级上搜索控制器。 controller
when you want to expose an API to other directives. Otherwise, use link
. 最佳实践:要向其他指令公开API时,请使用controller
。 否则,请使用link
。 The following section shows the complete code for the example, which we have explained in this post.
We have defined our custom directives and controller in this script file( app.js).以下部分显示了示例的完整代码,我们已在本文中对其进行了说明。
我们在此脚本文件( app.js )中定义了自定义指令和控制器。var app = angular.module('mainApp', []); app.directive("shape", function() { return { restrict: "E", scope:{ message:"@" }, controller: function($scope) { $scope.shapes = []; this.triangle = function() { $scope.shapes.push("Triangle"); }; this.circle = function() { $scope.shapes.push("Circle"); }; }, link: function(scope, element){ element.bind("click", function() { alert(scope.shapes); }); }, template:' ' }; }); app.directive("triangle", function() { return { require: '^shape', link: function (scope, element, attrs, shapeCtrl) { shapeCtrl.triangle(); } }; }); app.directive("circle", function() { return { require: '^shape', link: function (scope, element, attrs, shapeCtrl) { shapeCtrl.circle(); } };});
This is the HTML page we are using in this example to demonstrate the communication between directives.
这是我们在此示例中用来演示指令之间的通信HTML页面。
AngularJS Directive Communication/title>
You will see the following output on your browser.
您将在浏览器中看到以下输出。
That’s all for now and you will see more angular features in the coming posts.
到此为止,您将在以后的文章中看到更多的角度特征。
翻译自:
转载地址:http://ovlzd.baihongyu.com/