AngularJS指令通信教程
时间：2020-02-23 14:29:34 来源:igfitidea点击:
在先前的文章中，我们讨论了有关自定义指令和隔离范围的一系列教程。
有时您可能想构建一个由指令组合构建的组件。
在本文中，我们将讨论这个概念以及嵌套指令之间的通信。
在指令之间进行通信的方法有很多，但是在本文中，我们将讨论使用控制器作为API的通信。
AngularJS嵌套指令
您可以使用以下语法创建嵌套指令：
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
};
});
您也可以使用以下语法创建相同的语法。
在这种情况下，我们不复制变量，而是使用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指令通信
让我们通过以下示例讨论这个概念。
在这篇文章中，我们将创建三个指令shape，triangle和circle
" shape"指令定义了一个具有两个功能的控制器，用于将值推入shapes数组。
控制器将充当其他包含require属性的指令的API。
当用户单击元素时，链接功能用于警告shapes数组中的内容。
我们使用jQuerybind()方法来附加点击事件。然后，我们创建" triangle"和" circle"指令，其中包含一个链接函数，该函数在形状的指令控制器中调用该方法。
您可以将控制器作为第四个参数传递。
在此示例中，我们使用名称shapeCtrl。
您可以选择任何名称。
link: function (scope, element, attrs, shapeCtrl) {
shapeCtrl.triangle();
}
您可能已经在示例
require：'^ shape'中注意到了这一行代码。
该行负责指令之间的通信。
前缀" ^"表示指令在其父级上搜索控制器。最佳实践：要向其他指令公开API时，请使用"控制器"。
否则，使用link。
指令之间的通信示例
以下部分显示了示例的完整代码，我们已在本文中对其进行了说明。
我们在此脚本文件(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>'
};
});
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();
}
};
});
这是我们在此示例中用来演示指令之间的通信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>
