Вызов метода контроллера из ссылки Функция обработчика кликов не обновляет вид

Question

Моя проблема заключается в следующем: у меня есть директива с изолированной областью, где я хочу привязать обратный вызов «щелчок» к элементу. Короче говоря, я хочу сделать что-то похожее на это:

... 
<div test value='name' call='reset()'></div> 
... 

app.directive('test', function() { 
    return { 
     template: '<button>{{value}}</button>', 
     scope: { 
      value: '=', 
      call: '&' 
     }, 
     link: function(scope, elem, attrs){ 
      elem.bind('click', function(){ 
       scope.call(); 
      }) 
     } 
    } 
}); 

var myCtrl = function($scope){ 
    $scope.name = 'John'; 

    $scope.reset = function(){ 
     $scope.name = "Some random name"; 
     console.log('reset name!'); 
    }; 
} 

Увы, это не работает - она ​​запускает функцию reset(), но сфера применения контроллера не меняется ($scope.name остается той же). Однако, если я действительно привязываю в шаблоне:

template: '<button ng-click="call()">{{value}}</button>' 

все работает нормально. Проблема в том, что в реальной задаче я не использую параметр шаблона, поэтому я хотел бы спросить, есть ли способ сделать это связывание внутри функции связывания?

Спасибо!

Answer 1

Когда обработчик кликов, который вы настроили в своих директивах, запускается «снаружи» углового. $scope.name на самом деле получает набор (зарегистрируйте его, чтобы видеть), но ваш взгляд не обновляется, потому что Angular не знает об изменении. Добавьте scope.$apply() к вашему обработчику кликов, чтобы вызвать Угловое, чтобы ввести digest cycle, и ваше представление будет обновляться.

link: function(scope, elem, attrs){ 
    elem.bind('click', function(){ 
     scope.call(); 
     scope.$apply(); 
    }) 
} 

Fiddle.

Answer 2

<div test value='name' ng-click="call()"></div> 

без указания.

Если вы хотите сохранить Угловой стиль, который вы должны/* не использовать */использовать пользовательские привязки как можно меньше