切換與NG-秀指令

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

的原因是你的指令，你的模板有不同的範圍。當您更改內部toggle方法test場，你改變它的指令範圍，而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> 

標記這裏是你的指令

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

代碼在這種情況下，您的指令不依賴於myVar變量。它使用show屬性控制可視性。我也刪除$apply呼叫，因爲使用ng-click指令，這意味着angular意識到可能發生的變化，你不必明確地開始消化週期叫你的處理器。