angularJS自定义指令间的“沟通”

浏览数：18 / 时间：2015年06月09日

由此例子我们可以看出，angularJS使用指令时link的执行顺序
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body ng-app="components">
<div>
    <name xm>
        <h1>小明</h1>
    </name>
</div>
<div>
    <name xm xmxh>
        <h1>小明，小花</h1>
    </name>
</div>
<div>
    <name xm xmxh xmxhxl>
        <h1>小明，小花，小龙</h1>
    </name>
</div>
</body>
<script src="angular.js"></script>
<script>
    var app= angular.module(‘components‘, []);

    app.directive("name",function(){
        return {
            restrict: "AE",
            scope:{},
            controller:function($scope){
                $scope.name=[];
                this.Xm=function(){
                    $scope.name.push("小明");
                };
                this.Xh=function(){
                    $scope.name.push("小花");
                }
                this.Xl=function(){
                    $scope.name.push("小龙");
                }
            },//controller中定义的方法和乘员可以通过link的第四个参数实现对外公布
            link:function(scope, element, attr, superCtrl){
                element.bind("click",function(){
                    alert(scope.name);
                });
            }
        }
    });

    app.directive("xm",function(){
        return {
            require:"^name",
            link:function(scope, element, attr, superCtrl){
                superCtrl.Xm();
            }
        }
    });

    app.directive("xmxh",function(){
        return {
            require:"^name",
            link:function(scope, element, attr, superCtrl){
                superCtrl.Xh();
            }
        }
    });

    app.directive("xmxhxl",function(){
        return {
            require:"^name",
            link:function(scope, element, attr, superCtrl){
                superCtrl.Xl();
            }
        }
    });
</script>
</html>