window.setInterval() не работает должным образом в angular.js

Question

Я использовал функцию setInterval() в контроллере angular.js, чтобы позже показать таймер на интерфейсе. создайте переменную области видимости, которая имеет значение бездействия в секундах.

setInterval(function(){ scope.timer++ }, 1000);

он должен обновлять экран каждую секунду. но это не так. Некоторое время он обновляет экран через две секунды, три секунды, а иногда обновляет его каждые секунды, но это не соответствует. в то время как я регистрирую область. Значение таймера ведет себя правильно.

в чем будет проблема этого. Angular.js как-то ограничивает родной javascript или как?

Answer 1

Лучше использовать $ интервал, например:

var app = angular.module('MyApp', []);

app.controller('AppCtrl', function($scope, $interval) {
    $scope.timer = 0;
    $interval(function() { $scope.timer++; }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <div ng-bind="timer"></div>
</div>

Answer 2

Используйте scope.$ Apply

setInterval(function(){ scope.timer++; scope.$apply(); }, 1000);

setInterval не является угловой функцией, поэтому область видимости не обновляется.

Или используйте угловой сервис (предпочтительное решение):

$interval(function(){ scope.timer++;},1000);

Answer 3

Вы можете попробовать использовать Angular's $intervalиз документов

Вы должны добавить его в свой контроллер и использовать его, как это (см. Plunker)

app.controller('testController', ['$scope', '$interval', function($scope, $interval) {
  var count = 1;
  $scope.count = count;
  $interval(function() {
    $scope.count++;
  }, 1000);
}]);

Answer 4

setInterval является нативной функцией JS, чтобы выполнить ее внутри дайджест-цикла, вы должны вызвать метод apply() или, альтернативно, использовать интервал $ оболочки, как предложено в документе AngularJS.

$interval(function(){ scope.timer++ }, 1000);

https://docs.angularjs.org/api/ng/service/$ interval

Answer 5

Может быть значение обновляется в controller но не в DOMпопробуй это

JS

setInterval(function(){ 
 scope.timer++ 
 setTimeout(function(){
   $scope.$apply();
 }, 1);
}, 1000);

Или вы можете использовать $interval и вы следите за моим ответом вы можете использовать $timeout вместо setTimeout также

Answer 6

setInterval не угловая функция, следовательно, область не обновляется, я не рекомендую использовать scope.$apply() как его расточительно.

использовать встроенный угловой $interval метод:

.controller('ExampleController', ['$scope', '$interval',
  function($scope, $interval) {
      stop = $interval(function() {
          $scope.timer++;
      }, 1000);
});

документация: https://docs.angularjs.org/api/ng/service/$ interval

Answer 7

Вы должны использовать $ интервал

Обновите свой код до этого

$interval(function(){
    $scope.timer++;
}, 1000)

Убедитесь, что ваш $scope.timer правильно инициализирован