javascript - Angular 指令不适用于值的更改

Question

我有一个像这样的指令

testApp.directive('changeValue', function(){
    alert("coming");
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            element.text(attrs.val);
        },
        replace: true
    };
});

我的看法如下

<change-value val="{{test.val}}"/>

当我刷新页面时，我可以看到这些值并收到警报。但是当值被更改时，我没有将它应用于指令，但它绑定(bind)到 View ，因为我可以看到它在外部被简单地调用时被更改

<span>{{test.val}}</span>

我不确定这是如何工作的。提前致谢!

Answer 1

在您的代码中，链接函数仅执行一次，因此仅在创建指令实例时更新值。由于您想了解其值(value)并不断更新文本，您可以使用 $observe()

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.test = {
    val: "Welcome"
  };
});

app.directive('changeValue', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      attrs.$observe('val', function() {
        element.text(attrs.val);
      })
    },
    replace: true
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <change-value val="{{test.val}}"></change-value>
  <input ng-model="test.val" />
</div>