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"作为{{ {1}}。

在Angular 1.x当在指令中“观察”;为什么观看返回变量的函数不仅仅是观察变量？

1 个答案: