為什么在控制器中與指令結合使用函數時需要$ watch

Question

我知道並且可以想象為什么我需要注釋的代碼行才能使其正常工作。 但是我找不到技術原因。 當您單擊按鈕時，為什么該字段沒有更新？ （ $watch解決了這個問題。請參閱評論）

碼：

 angular.module('app', []).directive('foo', function() { return { scope: { value: '=' }, link: function($scope, element){ element.html($scope.value); //$scope.$watch(function() { return $scope.value }, function(){ //element.html($scope.value); //}) } }; }).controller('FooController', ['$scope', function($scope) { $scope.bar = "Hi" $scope.sayHallo = function(){ return $scope.bar; } $scope.changeHallo = function(){ $scope.bar = "Héj"; } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="FooController"> <div foo value="sayHallo()" ></div> <button ng-click="changeHallo()"> Click </button> </div> </div> 

Answer 1

用例中需要一塊手表。

每次范圍變量之一更改時，指令不會通過鏈接函數。 因此，在手表被注釋掉的情況下，鏈接函數將被執行，元素的html將被設置，這就是鏈接函數的結尾。 該指令的實例不再執行。

因此，如果您希望每次范圍變量更改時都更新元素的html，則需要一個觀察者。

Answer 2

此更改可能對您有幫助

HTML

<div ng-controller="FooController">
    <div foo value="bar"></div>
    <button ng-click="changeHallo()">
      Click
    </button>
  </div>

Jsfiddle演示

Answer 3

//if you don't want to use watch please use as below
element.bind('click', function () {
    //your code

    //after your code    
    scope.$digest();
});