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.data = "";
                    }]).
                    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
                                });

我们可以把复用性不高的操作，写在外面，这样就可以不用写太多的接口了。