Question

我正在尝试根据控制器中的Javascript Date对象在视图中显示当前时间。我的控制器看起来像这样：

myApp.controller('DateCtrl', function($scope) {
    var date = new Date();
    $scope.minutes = date.getMinutes();
    $scope.hours = date.getHours();
    $scope.seconds = date.getSeconds();
    var updateTime = function() {
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    }
    $scope.clickUpdate = function() {
        setInterval(updateTime, 1000);
    }
});

在我看来，我只是：

<div ng-controller="DateCtrl">
    <div>This is the hour: {{ hours }}</div>
    <div>This is the minute: {{ minutes }}</div>
    <div>This is the second: {{ seconds }}</div>
    <button ng-click="clickUpdate()">Click Update Here!</button>
</div>

出于某种原因，setInterval()方法只能运行一次，而且我无法让它每隔1秒继续运行updateTime()。我输入了一个简单的console.log()语句，每1秒运行一次......所以我很困惑。

我还检查了$scope.watch()和$scope.digest()，但我不太确定如何使用它们/如果我应该在这种情况下使用它们。

编辑：进一步检查后，似乎setInterval工作正常，每1秒调用updateTime()，但范围中的值未反映在我的视图中每次通话后。

Answer 1

这是因为您正在从角度世界之外的（setInterval）更改范围。您必须$apply更改：

var updateTime = function() {
    $scope.$apply(function(){
        var date2 = new Date();
        $scope.minutes = date2.getMinutes();
        $scope.hours = date2.getHours();
        $scope.seconds = date2.getSeconds();
    });
}

或使用角度感知功能，例如$timeout。检查this question中的@asgoth答案，以创建角度感知 setInterval()功能。

Answer 2

您可以在更改模型后使用$scope.$digest()，但我认为$scope.$apply更好

AngularJS通知视图模型的更改

2 个答案: