2

这是我的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 (click 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"

         });
       }

});
4

2 回答 2

4

您需要告诉范围您所做的更改，因为您正在更新 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它，因为它可能会被排除在流程之外随时触发。

于 2013-11-08T08:03:04.487 回答
0

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

它会工作，但有更好的方法来做你所追求的：
A. 使用 ng-click，并跳过指令

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

然后添加到您的控制器： 

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

B. 指令和范围：您真的应该花时间阅读此文档页面
您可以直接跳转到：“隔离指令的范围”部分

----（编辑）----
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

于 2013-11-08T08:12:03.030 回答