更新

Question

很抱歉，这个问题太傻了。我是AngularJs的新手！

可以说页面上有两个元素：一个input texbox绑定到name的{{1}}。另一个是绑定到$scope的{{1}}函数以评估当前时间的<p>。可以在此here

中找到此页面

getTime

$scope

该函数仅被调用一次。但是，如果我在文本框中输入一个值，该函数将立即触发。我不了解这两个事件之间的关系。希望有人可以照亮这里。

Answer 1

该视图必须显示getTime()返回的值。

因此，需要调用 getTime()才能知道返回的内容。

但是AngularJS可能不知道getTime()的作用。也许getTime()以相反的顺序返回在文本框中输入的值。或者可能不是。不知道

但是，它确实知道，当用户在输入字段中输入内容时，将修改范围的某些值。因此，这可能会更改getTime()计算和返回的值。

因此它再次调用getTime()来知道它是否返回了与以前不同的值，并在更改后显示新值。

基本上就是这样。实际上，这要复杂得多，因为更改范围中的值将触发观察程序，从而又可以更改范围中的其他值，等等。因此，此过程重复了多次，直到一切稳定为止。这称为摘要循环。它最多可以运行10次迭代，然后因错误而失败。

因此，回答您的问题：

AngularJs何时重新评估绑定函数？

很多时间。每当应用程序中发生任何AngularJS事件（ng-click，ng-mouseenter，返回的$ http响应，触发的$ interval等）时，每个事件均发生一次以上。

Answer 2

我不了解这两个事件之间的关系。希望，有人可以照亮这里。

拥有{{ getTime() }}后，您将指示AngularJS每次需要重新评估页面时都调用一个函数。

完全与呈现{{ currentTime }}之类的作用域变量一样；如果currentTime自上次评估cyklus以来已在代码中进行了更改（例如，由$scope.currentTime = new Date()进行了更改，那么还将呈现新的时间戳。

因此，这里没有魔术或错误，它可以按预期工作。您会发现它是因为时间总是在变化，因此每次重新呈现页面时都会调用getTime()方法。

Answer 3

在编译阶段：

ng-model和input directive在<input>控件上设置了keydown侦听器。
interpolation设置了$watch，以通知getTime()的更改。

在运行时阶段：

按下'X'键会使浏览器在输入控件上发出keydown事件。
input指令捕获对输入值的更改，并调用$apply ('name="X"')来更新AngularJS执行上下文中的应用程序模型。
AngularJS将name = 'X';应用于模型。
$digest循环开始
$watch列表执行getTime()
AngularJS退出执行上下文，然后依次退出keydown事件和JavaScript执行上下文。
浏览器使用更新后的文本重新呈现视图。

有关更多信息，请参见AngularJS Developer Guide - Integration with the Browser Event Loop

更新

如果目标是持续更新时间，请使用$interval Service

angular.module("app",[])
.controller("Controller",function($scope,$interval) {
    $scope.message = "Hello ";
    var promise = $interval(function() {
        $scope.currentTime = new Date();
    }, 500);
    $scope.$on("$destroy", function() {
        $interval.cancel(promise);
    });
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="Controller">
    <h1>{{message}}, {{name}}</h1>
    <h2>{{currentTime | date : 'hh:mm.ss.sss'}}</h2>
    <input type = "text" ng-model = "name">
</body>

$interval service在每个间隔事件中自动触发摘要周期。

有关更多信息，请参见AngularJS $interval Service API Reference

AngularJs何时重新评估绑定函数？

3 个答案:

更新