在网络上可以找到多种指令之间的通讯
· $on，$emit，$boardcast （向上或向下冒泡）
· 指令return的required （^）向上一个scope通讯，前提要先给scope一个name
· 建立一个factory，让需要通讯的指令依赖注入factory服务
以上都可以解决通讯问题，但是在不同的状况下还是会遇到代码阅读上的问题
今天遇到的问题是当指令A的child的指令B要和指令A通讯，同时指令C（不在指令A的child）要和指令A通讯
最终决定使用$on和$boardcast的方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>思涂客 Stooges</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script>
angular.module("app", []).
directive("myParent", [function () {
return {
restrict: "E",
link: function (scope) { },
controller: ["$scope", function ($scope) {
var that = this;
$scope.name = "parent";
that.alert = function () {
$scope.name = "alert";
}
$scope.$on("Main.myParent.alert", function (e, fn) {
fn(that);
});
}],
scope: true,
name: "myParent"
}
}]).
directive("myChild", [function () {
return {
restrict: "E",
require: "^myParent",
link: function (scope, elem, attrs, myParent) {
//myParent.alert();
}
}
}]).
directive("myOutputSide", ["$rootScope", function ($rootScope) {
return {
restrict: "E",
link: function (scope, elem, attrs) {
$rootScope.$broadcast("Main.myParent.alert", function (scope) {
scope.alert();
});
}
}
}]);
</script>
</head>
<body ng-app="app">
<my-parent data-xx="{{name}}">
<my-child></my-child>
</my-parent>
<my-output-side></my-output-side>
</body>
</html>
myParent 指令A
myChild 指令B
myOutputSide 指令C
指令A和指令B通讯方法：在指令A给ctrl一个name，这样在指令B就可以通过required调用指令A的ctrl
指令A和指令C通讯方法：在指令C依赖注入$rootscope，然后向下冒泡找到Main.myParent.alert，这在指令A是写好，同时需要一个参数scope。这样就能很好的通讯了，如果指令B和C都要改变指令A的scope，通过以上方法可以到达不重复代码！
时间： 2024-10-21 14:47:09