change icons with app.directive AngularJS

Question

У меня есть меню с несколькими значками, которые, когда я нажимаю на один из них, меняют значок, а когда я нажимаю снова на том же значке, возвращается в исходное состояние, но если я нажимаю на одном, а затем я нажимаю на другой, первый значок должен вернуться в исходное состояние, но это не так, и я не уверен, почему он не изменен.

HTML, заключается в следующем:

<div id="navbar" class="navbar-collapse collapse" ng-controller="customerInformationController"> 
     <ul class="nav navbar-nav navbar-left"> 
      <li> 
       <menuico linkTo="main" imageDefault="ico_menu_off.png" /> 
      </li> 
      <li> 
       <menuico linkTo="customerSearch" imageDefault="ico_search_off.png" /> 
      </li> 
      <li> 
       <menuico linkTo="#" imageDefault="ico_user_off.png" /> 
      </li> 
     </ul> 
     <img src="img/logo_santander.png" class="logo" /> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="navbar-manager">{{nombreGestor}}</li> 
      <li><a ng-click="closeTabs();" class="close-session"><img src="img/ico_closesession.png" /></a></li> 
     </ul> 
    </div> 

Я использую директиву AngularJS, чтобы сделать такие изменения иконки. Угловой код:

app.directive('menuico', function() { 
    return { 
    restrict: 'E', 
    replace:true, 
     scope: {}, 
    template: '<a href="#{{route}}"><img src="img/{{image}}" /></a>', 
    link: function(scope, elem, attrs) { 
      var active = false; 
      var defaultRoute = ""; 
      var activeIcon = "ico_close.png"; 

      scope.image = attrs.imagedefault; 
      scope.route = attrs.linkto; 
      elem.bind("click", function() { 
       active = !active; 
       if(active) { 
        scope.route = defaultRoute; 
        scope.image = activeIcon; 
       } else { 
        scope.route = attrs.linkto; 
        scope.image = attrs.imagedefault; 
       } 
      }); 
    } 
    }; 
}); 

Что мне нужно, например, в том, что если я нажал на «ico_search_off.png», это изменение «ico_close.png», и если теперь я нажал на «ico_user_off. png ", это одно изменение на« ico_close.png », и первое из них должно быть изменено на исходный статус, то есть на« ico_search_off.png », но первый не изменяется и остается в текущем состоянии.

Answer 1

Зачем это менять, если вы нажмете на другой? Это разные директивы с их собственными возможностями и собственными локальными переменными, чтобы они не разговаривали друг с другом.

Вам необходимо настроить связь между директивами.

Мой предпочтительный способ сделать это - привязать событие click к $ document, который срабатывает при каждом нажатии страницы (в любом месте). Это событие затем может инициировать запуск события на корневой каталог $, который сообщает всем вашим пунктам меню сбросить настройки. Единственный сложный бит в том, что вам нужно проверить событие event.target, которое было нажато, а не закрыть тот, который вы пытаетесь открыть.

Другое (возможно, лучшее) решение состоит в том, чтобы написать угловое обслуживание и ввести его в свою директиву, которая отслеживает все ваши пункты меню и какие из них находятся в каком состоянии. Это может быть излишним для простой директивы значка меню.

Answer 2

попробовать это ниже,

app.directive('menuico', function($rootScope) { 
    return { 
     restrict: 'E', 
     replace:true, 
     scope: {}, 
     template: '<a href="#{{route}}"><img src="img/{{image}}" /></a>', 
     link: function(scope, elem, attrs) { 
      var active = false; 
      var defaultRoute = ""; 
      var activeIcon = "ico_close.png"; 

      scope.image = attrs.imagedefault; 
      scope.route = attrs.linkto; 
      elem.bind("click", function() { 
       active = !active; 
       if(active) { 
        scope.route = defaultRoute; 
        scope.image = activeIcon; 
       } else { 
        scope.route = attrs.linkto; 
        scope.image = attrs.imagedefault; 
       } 
       $rootScope.$emit('resetElements', scope.route); 
      }); 
      $rootScope.$on('resetElements', function(event, data) { 
       if(data != scope.route) { 
        scope.route = attrs.linkto; 
        scope.image = attrs.imagedefault;  
       }  
      }); 
     } 
    }; 
}); 

так что вы будете слушать resetElements события в любое время есть событие щелчка. все остальные кнопки, которые не соответствуют кликуемому маршруту, будут сброшены.