Angularjs - 通過點擊同一指令中的不同元素在指令內切換元素的可見性

Question

我一直在試圖弄清楚這一點並做了一些搜索，但我發現的結果似乎總是解決指令和控制器之間發生的問題。

我在指令中有問題。我認爲我不正確地理解範圍。

我有一個指令，看起來像這樣：

mb.directive("plainText", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      value: "@", 
     }, 
     templateUrl: 'plainText.html', 
     link: function(scope, element, attrs){ 

      scope.view = false; 

      element.bind("click", function() { 

       if (scope.view == false) { 
        scope.view = true; 
        console.log(scope.view); 
       } else { 
        scope.view = false; 
        console.log(scope.view); 
       } 
      }) 

      scope.value = attrs.value; 
     } 
    } 
}) 

和HTML模板是這樣的：

<div>{{value}}</div> // this part of the directive always stays visible 

<div ng-show="{{view}}"> // THIS LINE NEEDS TO RESPOND TO THE CLICK 
    <input type="text" ng-model="value"> 
    <br/> 
    <div class="btn btn-default" ng-click="save()">Save</div> 
    <div class="btn btn-default" ng-click="cancel()">Cancel</div> 
</div> 

我的控制檯日誌顯示的點擊事件是由範圍值發射，但「視圖」不適用於需要顯示和隱藏的div。

有人能解釋我做錯了什麼嗎？

Answer 1

模板應該只是

<div ng-show="view"> 
    <input type="text" ng-model="value"> 
    <br/> 
    <div class="btn btn-default" ng-click="save()">Save</div> 
    <div class="btn btn-default" ng-click="cancel()">Cancel</div> 
</div> 

的NG-顯示指令手錶通過屬性傳遞的範圍變量的變化，所以你需要通過插入它來傳遞範圍的變量名稱，而不是變量。

你也需要調用scope.$apply()在jQuery的單擊處理

 element.bind("click", function() { 
      scope.view = !scope.view; 
      console.log(scope.view); 

      if (!scope.$$phase && !scope.$root.$$phase) { 
       scope.$apply() 
      } 
     }) 

演示：Fiddle