问题描述
实现一个子菜单的功能。菜单项有submenu的directive表示具有子菜单，如果有submenu='expanded'则表示加载好时即展开子菜单。而子菜单有submenu-for的directive表示子菜单属于哪个菜单项，值为菜单项的id。如：
<a submenu='expand'>第1项</a> <a submenu>第2项</a> <a submenu>第3项</a><ul submenu-for='m1'><li>第1.1项</li><li>第1.2项</li></ul><ul submenu-for='m2'><li>第2.1项</li><li>第2.2项</li></ul><ul submenu-for='m3'><li>第3.1项</li><li>第3.2项</li></ul>
CSS只是通过class='submenu-expan'来控制display之类的属性的就不写出了。
AngularJS代码如下：
.directive(’submenu’, [’$rootScope’, function($rootScope){ return {restrict: ’A’,scope: {},link: function(scope, element, attrs) { scope.$on(’submenu-toggle’, function(e, id){if(id==attrs.id) { element.toggleClass(’submenu-expan’);} }); if(attrs.submenu==’expanded’) {$rootScope.$broadcast(’submenu-toggle’, attrs.id); } element.bind(’click’, function(){$rootScope.$broadcast(’submenu-toggle’, attrs.id); });} }}]).directive(’submenuFor’, [’$timeout’, function($timeout){ return {restrict: ’A’,scope: {},link: function(scope, element, attrs) { scope.$on(’submenu-toggle’, function(e, id){if(id==attrs.submenuFor) { element.toggleClass(’submenu-expan’);} });} }}])
现在的问题是，响应click事件的时候是正常工作的，但是响应submenu='expaned'的初始设置的时候，submenu里的能正常动作，但是submenuFor的却没有动作。
请问是什么原因？该如何解决？
问题解答
回答1：directive之间通信需要声明controller，尽量减少rotoscope 上的broadcast
