Scope не обновляется по щелчку

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 
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(); при внесении изменений в область видимости, поэтому click будет отсутствовать, поскольку он может быть запущен в любое время.

Answer 2

Быстрый ответ: вы должны позвонить scope. $ Apply() после изменения области действия, так как «щелчок» не является «угловым».

Это будет работать, но есть гораздо лучший способ сделать то, что вы после:
A. Использование нг кнопкой мыши и пропустить директиву

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

Затем добавить к контроллеру:

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

B. Директива и прицелы: Вы действительно должны взять время и прочитать this documentation page
Вы можете перейти непосредственно к: "Изолирующим т он Сфера действия Директивы ", раздел

---- (EDIT) ----
C.Использование нг-повтор

Контроллер:

$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