Question

Angular如何知道指令在页面中的位置以及它如何绑定/监视这些元素？

我正在查看DOM引用，但是getElementbySomething和querySelectorAll似乎并没有找到Angular指令。

文章只提到作为参数传递给$ scope。$ watch的监听器，那么指令如何知道何时调用$ apply并启动摘要周期？

Answer 1

你应该能够找到一个带有querySelector的指令，如下所示：

var directive = document.querySelector('[ng-repeat]');

你可以读取这样的指令的任何值：

console.log(directive.attributes['ng-repeat'].value)

在指令中观察或观察值的变化。他们为什么要在角度范围之外改变？你想用vanilla javascript更改它们吗？

您可以使用间隔轮询值。我在这里放了一个codepen：http://codepen.io/rias/pen/bdNgJe?editors=101

＆＃13;

var value = 0;

function vanilla_increment_value() {
  value += 1;
  document.getElementById('changeme').attributes['ng-example-directive'].value = value;
}

// fake angular watching for changes outside of the scope
(function() {
  var directive = document.querySelector('[ng-example-directive]');
  var poll = directive.attributes['ng-example-directive'].value;

  // poll change
  setInterval(function() {
    var m = directive.attributes['ng-example-directive'].value;
    if (m != poll) {
      poll = m;
      alert(poll);
    }
  }, 100);
}());

＆＃13;

<body ng-app>
  <section ng-example-directive="1" id="changeme">
    <button onclick="vanilla_increment_value()">Value +1</button>
  </section>
</body>

＆＃13;

Answer 2

Angular没有找到＆＃39;指令。初始化Angular时，它会处理页面上的每个元素，并确定它是否包含已注册的指令。这称为编译阶段。

以优先级顺序为元素上的指令调用compile函数，并且指令所属的元素由angular存储以供将来使用。

重新提出有关使用$ apply的问题。只有在角度生命周期之外的某些内容更改了范围值时，才需要这样做。只有当您绑定标准事件（例如点击＆＃39;在指令内。

Angular如何知道指令放在页面中的位置？

2 个答案: