Question

我在绑定函数上发现了一个断点，发现每个摘要周期都会调用它。我有一个显示页面倒计时的计时器，并且不期望更新计时器值也会导致所有其他属性更新。

在下面的演示中，两个控制器的三个实例很明显。出乎意料的是，每次执行$timer时都会更新前两个日期。即使第二个日期的范围不同。

我可以通过在第三个日期（不更新）之前使用::之前的绑定来阻止日期更新，但是，这不能很好地扩展。我怎样才能使timer元素更新，而不是所有其他绑定？

演示

http://plnkr.co/edit/1IhAabzBXMVl9LEfaf8M?p=preview

的JavaScript

var app = angular.module('myApp', [])
  .controller('MainCtrl', ['$timeout', function($timeout) {
    var vm = this;
    vm.countDownLeft = 99999;
    vm.myFunction = function() { return new Date(); }

    function countdown() {
     vm.countDownLeft--;
     $timeout(countdown, 1000);
    }
    countdown();
}]).controller('SecondCtrl', function() {
  var vm = this;
  vm.myFunction = function() { return new Date(); }
});

HTML

<div ng-controller="MainCtrl as vm">
  <p>Counter: {{vm.countDownLeft}}</p>
  <p>Updates: {{ vm.myFunction() }}</p>
</div>
<div ng-controller="SecondCtrl as vm2">
  <p>Updates: {{ vm2.myFunction() }}</p>
</div>
<div ng-controller="SecondCtrl as vm3">
  <p>Doesn't update: {{ ::vm3.myFunction() }}</p>
</div>

Answer 1

我目前的解决方法是使用jQuery更新角度$ digest循环之外的计时器。我不喜欢它，但你去了;

<强>演示

http://plnkr.co/edit/cjNUKpRhP10OxYIfbnFj?p=preview

<强> HTML

<div ng-controller="MainCtrl as vm">
  <p>Counter: <span id="countDownLeft"></span></p>
  <p>Updates: {{ vm.myFunction() }}</p>
</div>

<强>的JavaScript

function countdown() {
    vm.countDownLeft--;
    $("#countDownLeft").text(vm.countDownLeft);
    setTimeout(countdown, 1000);
}

为什么每个$ digest周期都解决所有绑定？

1 个答案: