探讨angularJS中指令与指令的通信
指令这节是最难也是最重要的一节,接下来我们来学习一下指令和指令之间是如何通信的。
一、我们要实现的效果如下:
二、源码示例
- 控制器部分代码示例
/* * accordion可折叠扩展菜单示例 * 涉及指令嵌套,指令与指令之间的通信 */ myDirec.controller("SomeController2",function($scope) { $scope.expanders = [{ title : 'Click me to expand', text : 'Hi there folks, I am the content that was hidden but is now shown.' }, { title : 'Click this', text : 'I am even better text than you have seen previously' }, { title : 'Test', text : 'This is a test,hh~' }]; }); //定义accordion指令用于协调控制器 myDirec.directive('accordion', function() { return { restrict : 'EA', replace : true, transclude : true, template : '<div ng-transclude></div>', controller : function() { var expanders = []; //用于关闭其他的expander this.gotOpened = function(selectedExpander) { angular.forEach(expanders, function(expander) { if (selectedExpander != expander) { expander.showMe = false; } }); }; //用于注册expander this.addExpander = function(expander) { expanders.push(expander); }; } }; }); //定义expander指令 myDirec.directive('expander2', function() { return { restrict : 'EA',//只能放在元素或者属性上 replace : true, //格式可以替换 transclude : true, //能够让你移动一个标识符的原始子节点到一个新模板的位置 require : '^?accordion',//从在相同元素上的标识符获取控制器,该控制器是可选 scope : { title : '=expanderTitle' }, template : '<div>' + '<div class="title" ng-click="toggle()">{{title}}</div>' + '<div class="body" ng-show="showMe" ng-transclude></div>' + '</div>', link : function(scope, element, attrs, accordionController) { scope.showMe = false; accordionController.addExpander(scope); scope.toggle = function toggle() { scope.showMe = !scope.showMe; accordionController.gotOpened(scope); }; } }; });
- 页面代码示例
<div ng-controller='SomeController2'> <accordion> <expander2 class='expander'ng-repeat="expander in expanders" expander-title='expander.title'> {{expander.text}} </expander2> </accordion> </div>
三、分析流程
- 页面加载时将expander注册完毕然后通过ng-repeat遍历输出,此时的showMe属性为false;
- 当我们点击其中一个时触发了toggle事件,此时showMe属性更改为true,表示打开,这个时候text的内容就可以显示了。当然这里面用到了ng-show命令,不知道的可以查阅一下该属性的用法。
- 然后调用gotOpend方法依次将其他未被选择的expander进行依次关闭。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。