javascript - 单击时范围未更新

Question

这是我的html

 <div ng-controller="data">
       <div class="main">
           <div>{{name}}</div>
           <div custom-tag>click</div>
       </div></br>
       <div class="main">
           <div>{{name}}</div>
           <div custom-tag>click</div>
       </div></br>
       <div class="main">
           <div>{{name}}</div>
           <div custom-tag>click</div>
       </div>
 </div>

当我点击特定的div(点击div)时，我想将名称更改为特定点击的div的上方div。

这是我的 Controller

 app.controller('data',function($scope)
 {
     $scope.name="john"

 });

因此，当我加载 html 页面时，它将显示如下

 John
 click

 john
 click

 john
 click

当我点击第一次点击时，我必须将名称更改为britto，所以输出应该是这样的

 Britto 
 click

 john
 click

 john
 click

这是我尝试过的指令。当我单击 div 时，我收到了单击的警报消息。但scope的名字并没有改变

 app.directive('customTag',function()
{
       return function(scope, element, attrs)
       {
         element.bind('click',function()
         {
           alert("clicked");
           scope.name="britto"

         });
       }

});

Answer 1

您需要告诉范围您进行了更改，因为您正在更新 Angular 之外的范围。

像这样。

element.bind('click',function(){
   alert("clicked");
   scope.name = "britto"
   scope.$apply();
});

您也可以这样做。

element.bind('click',function(){
   alert("clicked");
   scope.$apply(function() {
      scope.name = "britto"
   });
});

我不太确定有什么区别......

帮助记住这一点的一个好方法是记住，任何未由 angular.js 调用且超出程序流程的函数，无论何时都需要使用 scope.$apply();更改范围，因此 click 将脱离流程，因为它可以随时触发。