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