单击时不更新作用域

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。

这是我的控制器

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

 });

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

 John
 click

 john
 click

 john
 click

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

 Britto 
 click

 john
 click

 john
 click

这是我的指令，我已经尝试过了。当我点击div时，我会收到一条被点击的警告消息。但作用域的名称不变

 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将不在程序流之外，因为它可以在任何时候触发。

Answer 2

快速回答:您必须在更改作用域之后调用scope.$apply()，因为“单击”不是“角度感知的”。

它会起作用，但有更好的方法来做你想要的：

A.使用ng-click，跳过该指令

<div>{{name}}</div>
<div ng-click="changeName()">click</div>

然后添加到您的控制器：

$scope.changeName = function(){ $scope.name="britto"; }

指令和作用域:你真的应该花点时间通读this documentation page

您可以直接跳转到：“隔离指令的作用域”部分

-(编辑)

C.使用ng-repeat

控制器：

$scope.names = ["john","michael","jack"];

html：

<div ng-controller="data">
   <div class="main" ng-repeat="name in names">
       <div>{{name}}</div>
       <div ng-click="name='britto'">click</div>
       <br/>
   </div>
</div>

查看此plunkr