用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

當你點擊另一個時，它爲什麼會改變？他們是與他們自己的範圍和他們自己的局部變量不同的指令，所以他們不會相互交談。

您需要在指令之間建立某種通信。

我這樣做的首選方法是將點擊事件綁定到$ document，每次點擊頁面（任何地方）時觸發。這個事件然後可以觸發$ rootscope上的一個事件的觸發，它告訴你所有的菜單項重置自己。唯一棘手的是你需要檢查被點擊的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事件的任何時候有一個click事件。所有其他與點擊路線不匹配的按鈕都將被重置。