angular.js - AngularJS中directive不回應載入時觸發的事件怎麼破

Question

實現一個子選單的功能。選單項目有submenu的directive表示具有子選單，如果有submenu="expanded"則表示載入好時即展開子選單。而子選單有submenu-for的directive表示子選單屬於哪個選單項，值為選單項目的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裡的能正常動作，但是submenuForsubmenu

裡的能正常動作，但是

submenuFor

的卻沒有動作。 🎜 🎜請問是什麼原因？該如何解決？ 🎜

Answer 1

directive之間通訊需要聲明controller，盡量減少rotoscope 上的broadcast