Question

我正在尝试通过从服务中获取数据的控制器来更新视图。出于某种原因，当服务的数据发生更改时，视图不会更新。我从我的应用程序here中提取了一个示例。我尝试了各种绑定（$scope.time = TimerService.value，包含在一个函数中，使用$watch - 没有成功。

请注意，在我的原始应用中，这是一个对象数组，对象的属性也会发生变化。

- script.js -

var mod = angular.module('mymodule', []);

mod.service('TimerService', function() {
  this.value = 0;
  var self = this;
  setInterval(function() {
    self.value += 1;
  }, 2000)
});

mod.controller('TimerCtrl', ['TimerService', '$scope', function(TimerService, $scope) {
  $scope.time = TimerService.value;
  $scope.$watch(function() {
    return TimerService.value;
  }, function(newValue) {
    $scope.time = newValue;  
  }, true);
  $scope.otherValue = '12345';
}]);


angular.element(document).ready(function() {
  alert('start');
  angular.bootstrap(document, ['mymodule']);
});

- index.html -

<!DOCTYPE html>
<html>

  <head>
    <script src="./angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
      <div ng-controller="TimerCtrl">
          <h1>- {{ time }}-</h1>
          <h2>{{ otherValue }}</h2>
      </div>
  </body>

</html>

Answer 1

经过一段时间的反复试验后，我终于找到了问题的答案。在上面的示例（和我的实际应用程序）中，数据在角度范围之外被更改（控制器按钮单击，http请求等），这意味着摘要周期不会被启动。如果我将代码更改为使用$timeout()，则可以使用。不幸的是，这并没有完全解决我的数据在角度之外被改变的问题（我想我需要将其余部分整合到角度中）。

<强>更新

我设法在我的服务中使用rootscope执行角度以外的更改：

$rootscope.$apply(function() {
  // perform variable update here.
  self.value += 1;
});

这成功传播到视图。

Answer 2

试试这个

$scope.time = TimerService.value;
if(!$scope.$$phase) {
    $scope.$apply();
}

Answer 3

尝试

var app = angular.module('myApp', []);
            var value = 0;
            var timer = setInterval('Repeater()', 1000);
            var Repeater = function () {
                value++;
                var scope = angular.element(document.getElementById('myApp')).scope();
                console.log(scope);
                scope.$apply(function () {
                        scope.time = value;
                    });
                };
            app.controller('TimerCtrl', ['$scope', function( $scope) {

          }]);

归功于https://stackoverflow.com/a/16520050/356380

Angularjs视图不会更新

3 个答案: