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，所以out put应该是这样的

 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

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

喜欢这个。

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();的程序流，因此{{ 1}}将不在流程中，因为它可以随时触发。

Answer 2

快速回答：更改范围后，您必须调用范围。$ apply（），因为“点击”不是“角度感知”。

它会起作用，但有更好的方法来做你想要的事情：
A.使用ng-click，并跳过指令

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

然后添加到您的控制器：

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

B中。指令和范围：您应该花时间阅读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

范围未在点击时更新

2 个答案: