代码之家 › 专栏 › 技术社区 › Hans

AngularJs何时重新计算绑定函数?

angularjs

Hans · 技术社区 · 6 年前

假设页面上有两个元素: 一 input name 属于 $scope . 另一个是 <p> getTime 功能 $范围 计算当前时间。这一页可以在这个劫掠者身上找到 here

  <body ng-controller="Controller">
    <h1>{{message}}, {{name}}</h1>
    <h2>{{getTime()}}</h2>
    <input type = "text" ng-model = "name">
  </body>

  $scope.getTime = function(){
    return new Date();
  }

函数只被调用一次。但是,如果我在文本框中输入一个值,函数将立即激发。我不明白这两件事之间的关系。希望有人能给我点颜色。

3 回复 | 直到 6 年前

JB Nizet 6 年前

视图必须显示 getTime()

所以它需要呼叫 获取时间() 知道它会返回什么。

但安格拉斯不可能知道做。也许吧按相反顺序返回在文本框中输入的值。或许不是。它不知道。

但是,它知道的是,当用户在输入字段中输入某些内容时,范围的某些值将被修改。这样就可以改变 .

获取时间() 再次查看它是否返回与以前不同的值,并显示新值(如果已更改)。

基本上就是这样。实际上比这更复杂,因为更改作用域中的值将触发监视程序,而监视程序又可以更改作用域中的其他值等。因此,此过程会重复多次,直到一切稳定。这称为摘要循环。它最多可以运行10次迭代,然后失败并出现错误。

所以,回答你的问题:

很多时候。每当应用程序中发生任何AngularJS事件(ng click、ng mouseenter、返回的$http响应、触发的$interval等)时,每个事件都会发生一次以上。

davidkonrad 6 年前

我不明白这两件事之间的关系。有希望地,

当你有 {{ getTime() }} 您指示AngularJS在每次需要重新评估页面时调用函数。

确切地 就像你把一个范围变量 {{ currentTime }} currentTime 自上一次计算cyklus以来,代码已更改,例如 $scope.currentTime = new Date() 然后一个新的时间戳也会被呈现出来。

所以这里没有魔法或错误,它按预期工作。你只是注意到时间总是在变化 getTime()

georgeawg 6 年前

在编译阶段:

这个 ng-model 和 input directive <input> 控制。
这个 interpolation 建立一个 $watch getTime() 变化。

在运行阶段:

压榨 'X' keydown 输入控件上的事件。
$apply ('name="X"') 更新AngularJS执行上下文中的应用程序模型。
AngularJS应用 name = 'X';
这个 $digest 循环开始
$手表执行列表 获取时间()
键盘按下 事件及其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