angularJS自定义指令间的“沟通”
由此例子我们可以看出,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>