在 Angular 1.x 中“观看”指令时；为什么查看返回变量的函数与仅查看变量的行为不同？

Question

解释这个问题的最简单方法是使用一些示例代码，所以这里有一个用 ES6 语法编写的非常简单的指令：

export default class IsFoo {

  constructor() {
    // Set the directive properties
    this.restrict = 'A';
    this.require = 'ngModel';
  }

  link(scope, element, attributes, controller) {

    let foo = scope.$eval(attributes.foo);

    controller.$validators.isFooBar = (modelValue) => {

      // make sure we have the most recent value foo
      foo = attributes.foo;

        return foo === 'bar';
      };

      scope.$watch(() => {return attributes.foo;}, () => controller.$validate());
  }

  static directiveFactory() {
    IsFoo.instance = new IsFoo();
    return IsFoo.instance;
  }

}

IsFoo.directiveName = 'isFooBar';

这是我的指令的粗略版本，删除了所有实际的重要验证。它非常简单。

如果我将观察线更改为：

scope.$watch(attributes.foo), ()=>controller.$validate());

它不起作用。为什么？为什么返回attributes.foo 的函数会起作用？

导致最终结果不同的差异是什么？

另外，免责声明，我故意不使用范围隔离，因为该指令正在用于具有另一个使用范围隔离的指令的元素上。所以它们发生冲突，您会收到错误Multiple directives asking for new/isolated scope on: xxx。

我的粗略猜测是它与闭包在 javascript 中的行为方式有关，但我无法理解两者的行为方式有何不同。

感谢您提供的任何见解。

Answer 1

scope.$watch的接口根据documentation如下：

$watch(watchExpression, listener, [objectEquality]);

watchExpression 是 string 或 function。如果它是string，它会被解释为scope 对象中的路径。假设attributes.foo 是"test.something"，它将监视scope.test.something - 如果它存在。

如果您想观察attributes.foo 的值的变化，您必须使用function，或者将attributes.foo 附加到您的作用域并将"attributes.foo" 作为watchExpression 传递。