AngularJS观察列表排除

Question

如何在手动选择的手表上运行摘要循环？例如，我想要一个显示当前时间（秒）的指令，但我不想每秒都触发摘要循环。一种解决方案是更新angular's digest循环外部的值（使用jQuery）。其他方案？

谢谢。

Answer 1

一种方法来“限制”的消化作用是只在当前范围及其子女运行摘要。这是通过$scope.$digest()完成的。

相比之下，$scope.$apply()从根范围调用摘要，因此在这个意义上它与做$rootScope.$digest()相同。

编辑：

如果您正在使用$timeout/$interval，然后确保到invokeApply参数设置为false，否则会从根触发摘要。

Answer 2

使用angulars $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 3

你的时钟指令可能会使用$timeout或$interval，它具有以下特征：

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

通知的invokeApply参数。如果将其设置为false，则角度将为跳过脏检查。

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)); 
});