Question

如何在手动选择的手表上运行摘要循环？例如，我想要一个显示当前时间（以秒为单位）的指令，但我不想每秒触发摘要循环。一种解决方案是更新角度消化循环之外的值（使用jQuery）。其他解决方案？

感谢。

Answer 1

您的时钟指令可能会使用具有以下签名的$timeout或$interval：

$timeout([fn], [delay], [invokeApply], [Pass]);
$interval(fn, delay, [count], [invokeApply], [Pass]);

注意invokeApply参数。如果将其设置为false，则angular将跳过脏检查。

Answer 2

“限制”摘要效果的一种方法是仅在当前作用域及其子作品上运行摘要。这是通过$scope.$digest()完成的。

相反，$scope.$apply()从根作用域调用摘要，因此从这个意义上说它与执行$rootScope.$digest()相同。

编辑：

如果您使用的是$timeout / $interval，请务必将invokeApply参数设置为false，否则会触发来自根目录的摘要。

Answer 3

使用角度$interval()代替javascripts setInterval作为您的时钟。 $interval会处理摘要。

https://docs.angularjs.org/api/ng/service/ $间隔

<强>更新

我实际上在我正在进行的项目中有一个时钟指令：

指令：

app.directive('clock', ['$interval', 'dateFilter',function($interval, dateFilter) {

return {
  restrict:   'E',
  scope:      {
    format:   '=',
  },
  link: function (scope, element, attrs) {
    var format;
    var stopTime;

    // set the time in the directive
    function setTime() {
      element.text(dateFilter(new Date(), format));
    }

    // update the UI on change.
    scope.$watch(attrs.format, function(value) {
      format = value;
      setTime();
    });

    format = attrs.format;
    updateTime();
    stopTime = $interval(setTime, 1000);

    element.on('$destroy', function() {
      $interval.cancel(stopTime);
    });
  }
};

}]);

用法：

<clock format="'H:mm'"></clock>

Answer 4

我建议用debounce实用功能包装你的观察者。大卫沃尔什提供了一个非常甜蜜solution。这是一个简单的demo：

angular.module('watchApp', []).controller('watchCtrl', function ($scope) {
    $scope.count = 0;
    $scope.b = Date.now();


    $scope.$watch("b", _debounce(function (b) {

        $scope.$apply(function () {
            $scope.b = Date.now();
            $scope.count += 1;
        })
    }, 1000));
});

AngularJS观察列表排除

4 个答案: