首页 > 代码库 > angular : direative :通讯
angular : direative :通讯
在网络上可以找到多种指令之间的通讯
· $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="http://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,通过以上方法可以到达不重复代码!
angular : direative :通讯
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。