AngularJS指令通信教程

We have discussed about a series of tutorials on custom directives and isolate scope 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的通信。

AngularJS嵌套指令 (AngularJS Nested Directives)

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
		};
	})

AngularJS指令通信 (AngularJS Directive Communication)

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

• • The shapedirective defines a controller with two functions to push values in to the shapes array.
    shape指令定义了一个具有两个功能的控制器，用于将值推入shapes数组。
  • The controller will act as an API for other directives which contains the require property.
    该控制器将充当其他包含require属性的指令的API。
  • The link function is used to alert the contents in the shapes array when the user clicks on the element. We use jQuery’s bind() method which attaches click event.
    当用户单击元素时，链接功能用于警告shapes数组中的内容。 我们使用jQuery的bind（）方法来附加click事件。
  • Then we create directives 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();
}

• You may have noticed this line of code in the example, 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' . 该行负责指令之间的通信。 前缀^表示指令在其父级上搜索控制器。
• Best Practice: use controller when you want to expose an API to other directives. Otherwise, use link.
  最佳实践：要向其他指令公开API时，请使用controller 。 否则，请使用link 。

指令之间的通信示例 (Communication Between Directives Example)

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:'<button style="color:green">{{message}}</button> <br><br>'
		};

	});

	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页面。

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

 	<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>

	</head>
	<body>

		<div ng-app="mainApp">

			<div>

				<shape triangle circle message=" Click me to alert all Shapes"></shape>

				<shape triangle message=" Click me to alert Triangle"></shape>

				<shape circle message=" Click me to alert Circle"></shape>

			</div>

		</div>

	</body>
</html>

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.

到此为止，您将在以后的文章中看到更多的角度特征。

翻译自: https://www.journaldev.com/7680/angularjs-directive-communication-tutorial