angulaire.js - Comment résoudre le problème selon lequel la directive dans AngularJS ne répond pas aux événements déclenchés lors du chargement

Question

Implémentez la fonction d'un sous-menu. Si l'élément de menu a submenu, cela signifie qu'il a un sous-menu. S'il a directive, cela signifie que le sous-menu sera développé lorsqu'il sera chargé. Le submenu="expanded" avec submenu-for dans le sous-menu indique à quel élément de menu appartient le sous-menu, et la valeur est le directive de l'élément de menu. Tel que : 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 utilise uniquement

pour contrôler des attributs tels que class="submenu-expan" et ne sera pas écrit. display

Le code AngularJS est le suivant :

.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');
                }
            });
        }
    }
}])

Le problème actuel est qu'il fonctionne normalement en répondant à l'événement

, mais en répondant aux paramètres initiaux de click, ceux de submenu="expaned" peuvent agir normalement, mais ceux de submenu ont aucune action. submenuFor

Quelle est la raison ? Comment le résoudre ?

Answer 1

La communication entre directives nécessite de déclarer un contrôleur et de minimiser la diffusion sur le rotoscope