为什么我不能将元素属性传递给 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 注入的服务），并且该语法仅对 $scope 服务下的属性有效。

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

例如

$scope.stuff = {}

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

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

为什么需要函数？

你传递给观察者的函数是一个闭包并且可以访问外部范围，这意味着包括elem在内的所有外部范围变量。