Question

我知道并且可以想象为什么我需要注释的代码行来让它工作。但我找不到技术原因。为什么单击按钮时字段不会更新？（$watch解决了问题。见评论）

代码：

＆＃13;

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";
    }
}]);

＆＃13;

<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>

＆＃13;

Answer 1

您的使用案例中需要手表。

每当其中一个范围变量发生变化时，指令就不会通过链接函数。所以随着手表的注释，链接功能将被执行，元素的html将被设置，这就是链接功能的结束。对于该指令的实例，它不再被执行。

因此，如果您想在每次更改范围变量时更新元素的html，您将需要一个观察者。

Answer 2

此更改可能对您有所帮助

<强> HTML

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

Jsfiddle demo

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();
});

当在控制器中使用函数并结合指令时，为什么需要$ watch

3 个答案: