AngularJS通知對模型的更改視圖

我想在基於我的控制器中的JavaScript日期對象的視圖中顯示當前時間。我的控制器看起來是這樣的：AngularJS通知對模型的更改視圖

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()方法只一次，我不能讓它繼續運行updateTime()每1第二如已設定。我發表了一條簡單的console.log()聲明，並且每隔1秒就會運行一次......所以我非常困惑。

我也簽出了$scope.watch()和$scope.digest()但我不太確定他們如何使用/如果我應該在這種情況下使用它們。

編輯：經過進一步檢驗，它看起來好像setInterval工作正常，主叫updateTime()每隔1秒，但在範圍中的值不被反映在每個呼叫之後我的視圖。

來源

2013-07-25 Shawn Taylor

'的setInterval（錄入，1000）' – elclanrs

出於某種原因，它具有相同的行爲，我是否使用「錄入（）」或者「 updateTime「，它不會繼續自行更新。 –

在'updateTime'函數中更新範圍值。 – elclanrs

這是因爲你正在改變從範圍以外的角度世界（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。檢查@asgoth在this question的答案以創建一個角度感知setInterval()函數。

來源

2013-07-25 03:06:13 Sylvain

$ scope。$ apply會導致對$ digest的調用，整個過程會導致「驗證」，或者更確切地說，會觸發所有已更改範圍的所有監視。事情在諸如$超時或$ http等角度已經有這個代碼。將函數傳遞給$ scope。$ apply（）而不是不帶參數調用它，允許Angular在任何代碼執行時處理包裝錯誤處理。 – shaunhusain

-2

您還可以使用$scope.$digest()更改模型後，但我認爲$scope.$apply更好

來源

2014-07-09 07:29:37 user3819305

AngularJS通知對模型的更改視圖

回答

相關問題