angular.js - AngularJS中directive不响应加载时触发的事件怎么破
阿神
阿神 2017-05-15 16:57:56
0
1
503

实现一个子菜单的功能。菜单项有submenudirective表示具有子菜单,如果有submenu="expanded"则表示加载好时即展开子菜单。而子菜单有submenu-fordirective表示子菜单属于哪个菜单项,值为菜单项的id。如:

<a id="m1" submenu="expand">第1项</a> <a id="m2" submenu>第2项</a> <a id="m3" 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的却没有动作。

请问是什么原因?该如何解决?

阿神
阿神

闭关修行中......

Antworte allen(1)
黄舟

directive之间通信需要声明controller,尽量减少rotoscope 上的broadcast

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage