angular : direative :comunication 指令之间的通讯

在网络上可以找到多种指令之间的通讯

· $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>
View Code

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,通过以上方法可以到达不重复代码

 

posted @ 2014-08-22 23:59  泉油  阅读(354)  评论(0编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges