ng-showとの切り替えがディレクティブで動作しない

Question

私のアプリケーションでサイドバーを表示する指示があります。 このサイドバーの中にいくつかのコンテンツを切り替えるコードを書き込もうとしました。 しかし、トグル機能をトリガーすると何も起こりません。

これは私のディレクティブです：

menuItem.directive("menuItem", function() { 
return { 
    restrict: "E", 
    template: "<div ng-click='toggle()' ng-transclude></div>", 
    transclude: true, 
    scope: { 
     hash: "@" 
    }, 
    link: function($scope) { 
     $scope.toggle = function(e) { 
      $scope.test = !$scope.test; 
      console.log($scope.test); 
      $scope.$apply(); // This here brings up error $rootScope: inprog 
     } 
    } 
} 
}); 

そして、ここでは私のhtmlです：

<menu visible="leftVisible" alignment="left"> 
          <menu-item hash="first-page"> 
           <div> 
            Testing 
           </div> 
           <ul ng-show="test"> 
           <li>1</li> 
           <li>2</li> 
           </ul> 
          </menu-item> 
       </menu> 

どのように私はULのトグルを作るために、この問題を解決する必要がありますか？

Answer 1

その理由は、ディレクティブとテンプレートのスコープが異なるためです。 testフィールドをtoggleメソッド内で変更すると、指示スコープで変更されますが、ng-show指示子はコントローラスコープからの変数を使用します。そしてあなたの指示はコントローラのマークアップ（とコントローラー特有の変数、例えばtestのようなもの）に依存すべきではありません。ディレクティブに可変バインディングを作成して可視性を変更することができます。コントローラのマークアップは、この変数を使用してメニュー項目を表示または非表示にする役割を担います。ここにあなたのコントローラ

<menu visible="leftVisible" alignment="left"> 
    <menu-item hash="first-page" show="someVar"> 
     <div> 
      Testing 
     </div> 
     <ul ng-show="someVar"> 
      <li>1</li> 
      <li>2</li> 
     </ul> 
    </menu-item> 
</menu> 

ためのマークアップされており、ここにあなたのディレクティブはmyVar変数に依存しない。この場合、あなたのディレクティブ

menuItem.directive("menuItem", function() { 
    return { 
     restrict: "E", 
     template: "<div ng-click='toggle()' ng-transclude></div>", 
     transclude: true, 
     scope: { 
      hash: "@", 
      show: '=' 
     }, 
     link: function ($scope) { 
      $scope.toggle = function (e) { 
       $scope.show = !$scope.show; 
      } 
     } 
    } 
}); 

ためのコードです。 show属性を使用して可視性を制御します。あなたのハンドラがng-clickディレクティブを使用して呼び出されたため、angularが可能な変更を認識しており、ダイジェストサイクルを明示的に開始する必要がないことを意味するので、$applyコールを削除しました。