首页 > 代码库 > controller 和 指令 通讯方法
controller 和 指令 通讯方法
在 angular 中我们经常会使用多个 controller 和 指令
他们拥有各自的 $scope , 这就产生了跨$scope调用的问题。
有几种常见的方法来可以使用.
方法一 : 指令 require
<div directive1="xx"> <div directive2></div> </div> directive("directive1", [function () { return { restrict: "A", link: function () { }, scope: true, controller: ["$scope", function ($scope) { this.alert = function () { $scope.name = "100" } }], name: "directive1Controller" } }]). directive("directive2", [function () { return { restrict: "E", require: "^directive1Controller", //调用父级指令的controller link: function (scope, elem, attrs, directive1Controller) { directive1Controller.alert(); //使用方法 } } }]).
指令通过require,调用其它指令controller方法, 达到通讯
方法二 : service
service("sharing", [function () { this.datahttp://www.mamicode.com/= ""; }]). controller("ctrl", ["$scope", "sharing", function ($scope, sharing) { $scope.updateData = function () { sharing.data = "new value"; } }]). directive("directive1", ["sharing", function (sharing) { return { restrict: "A", link: function (scope) { scope.$watch(function () { return sharing.data; }, function () { scope.name = sharing.data; }); } } }]).模块间如果要通讯最好使用 service 来提供接口 , 那service 和 controller 间可以通过 $watch 来更新$scope.
$watch 有些缺点，内存消耗多
方法3 ：事件
controller("ctrl", ["$scope", "sharing", "$rootScope", function ($scope, sharing, $rootScope) { $scope.updateData = function () { $rootScope.$broadcast("sharingChange", "new value"); //$emit 是向上冒泡广播 //$broadcast 是向下广播 } }]). directive("directive1", ["sharing", function (sharing) { return { restrict: "A", link: function (scope) { scope.$on("sharingChange", function (e, newValue) { scope.name = newValue; }); } } }]).这是比较官方的做法。
总结 :
子层和父层通讯，多使用继承的$scope, 指令的 require ,事件广播
模块间的通讯使用service提供接口会比较容易看的明白, service 和 controller 指令间的通讯，可以用watch,$on或者全局变量(模块内的全局,别用太多既可)
service 接口虽然好, 不过由于指令复用性很高，如果每个操作都开接口的话，很快接口就会很多，所以要确保接口是复用性高的，如果只是为了某次开发为配合某模块而开就不值得了。
$rootScope.$broadcast("Main.myParent.alert", function ($scope) { //某个模块, (通过传入操作方法,这里直接写操作$scope) $scope.name = "keatkeat" }); $scope.$on("Main.myParent.alert", function (e, fn) { //常用指令 fn($scope); //调用操作方法并把$scope传入，让外部的逻辑实现操作$scope });我们可以把复用性不高的操作，写在外面，这样就可以不用写太多的接口了。
controller 和 指令 通讯方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。