码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-10 14:06:52      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

由此例子我们可以看出,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>

 

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

标签:

原文地址:http://www.cnblogs.com/zzq-include/p/4492080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!