app.directiveでアイコンを変更AngularJS

Question

私はいくつかのアイコンを持つメニューを持っています。そのアイコンの1つをクリックするとアイコンが変わり、同じアイコンで再びクリックすると元の状態に戻りますが、別のアイコンをクリックすると、最初のアイコンは元の状態に戻りますが、そうではありません。変更されていない理由はわかりません。

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」に今すぐクリックした場合のことです。 「ico_close.png」に変更され、最初のものは元の状態、つまり「ico_search_off.png」に変更する必要がありますが、最初のものは変更されずに現在の状態にとどまります

Answer 1

別のものをクリックすると、なぜそれが変わるのですか？彼らは独自のスコープと独自のローカル変数を持つ異なるディレクティブなので、お互いに会話しません。

ディレクティブ間で何らかの通信を設定する必要があります。

これを行うには、ページをクリックするたびに（どこでも）発生する$ documentにclickイベントをバインドするのが好ましい方法です。このイベントは、$ rootscope上のイベントの起動をトリガーし、すべてのメニュー項目に自分自身をリセットするよう指示します。トリッキーな唯一の点は、クリックしたevent.targetをチェックし、開こうとしているevent.targetを閉じる必要がないことです。

もう1つの（おそらくより良い）解決策は、角度サービスを作成して、それをあなたのすべてのメニュー項目とどの状態にあるかを把握しているあなたの指示に注入することです。しかし、これは単純なメニューアイコンの指示に過度のものかもしれません。

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;  
       }  
      }); 
     } 
    }; 
}); 

Answer 2

以下これを試しては、あなたがresetElementsイベントにクリックイベントがあり、いつでも聴くことになります。クリックされたルートと一致しない他のすべてのボタンはリセットされます。