Question

我遇到了一个问题，即范围更改没有反映在视图中。

"use strict"

app.controller "DashboardController", ($scope, $http, $filter, $location) ->
  $scope.greeting = 'Hello from the dashboard!'

  $scope.time = ""

  $scope.updateClock = ->
    date = new Date()

    $scope.time = [date.getHours(), date.getMinutes(), date.getSeconds()].join(':')

  setInterval $scope.updateClock, 1000

这是coffeescript代码。

<div class="clock">
  {{time}}
</div>

这就是我的观点。

时间不显示。如果我手动在控制器的开头设置$scope.time它可以正常工作，但只是当它在一个函数内时。编译好的咖啡因看起来像这样：

(function() {
  "use strict";
  app.controller("DashboardController", function($scope, $http, $filter, $location) {
    $scope.greeting = 'Hello from the dashboard!';
    $scope.time = "";
    $scope.updateClock = function() {
      var date;
      date = new Date();
      return $scope.time = [date.getHours(), date.getMinutes(), date.getSeconds()].join(':');
    };
    return setInterval($scope.updateClock, 1000);
  });

}).call(this);

为什么会这样做？

Answer 1

setInternal在AngularJS的摘要/工作循环之外工作，因此Angular不知道执行脏检查。使用$ apply明确告诉Angular这样做。

$scope.$apply(setInterval($scope.updateClock, 1000));

修改

Angular现在有一个window.setInterval的包装器，你应该使用它。将$ interval注入控制器。然后将该行更改为：

$interval($scope.updateClock, 1000);

好多了。

http://jsfiddle.net/nahpf/

从函数内部操作时，范围更改未在视图中显示

1 个答案: