javascript - 为什么我不能将元素属性传递给 scope.$watch 但我可以传递一个返回它的函数

Question

我用下面的代码写了一个指令watchId

.directive('watchId', function(){
 return {
  restrict: 'A',
  link: function(scope, elem, attr) {
   scope.$watch(function() { return elem.attr('id') }, function(newValue){
    if (newValue) {
     scope.loaded[newValue] = true
    }
   })
  }
 }
})

上面的代码工作正常，但我的问题是为什么我不能做 scope.$watch(elem.attr('id'), function(newValue) {

我认为不需要它，但这是一个 JSfiddle我在上面玩的地方。

Answer 1

因为 elem 不是 $scope 字段(而是 Angular 注入(inject)的服务)，并且该语法仅对 $scope 服务下的属性有效。

您可以将其视为“捷径”。

例如

$scope.stuff = {}

$scope.$watch('stuff', function(newVal){
 //this is valid because stuff is a property of the $scope object
})

如果您要查看的属性不是 $scope 对象的一部分，您必须注册一个函数作为第一个参数，每个摘要周期都会触发该函数以检查更改。

为什么需要函数？

您传递给观察者的函数是一个闭包并且可以访问外部作用域，这意味着所有外部作用域变量包括 elem。