$ scope中的變量在HTML上消失刷新

Question

我有一個範圍變量，當它來自網站上的其他地方時，它應該正常顯示。但是，如果刷新了$ scope變量的HTML頁面，則該變量值將消失。

我的控制器看起來是這樣的：

angular.module('testApp') 
.controller('TestShowCtrl', function($scope, Ref, $routeParams) { 
    //Get ID out of current URL 
    var currentId = $routeParams.id; 

    var ref = new Firebase(Ref + 'events').child(currentId); 

    ref.on('value', function(snapshot) { 
     var data = snapshot.val(); 
     console.log('data.title: ' + data.title); 
     $scope.title = data.title; 

    }); 
}); 

我的HTML看起來像這樣：

<h3 id="test">Title: {{title}}</h3> 

奇怪的是，儘管HTML不顯示變量，但它仍然會出現在更新後的控制檯。

Answer 1

同步來自Firebase的數據是異步操作。當數據從Firebase返回並將其綁定到範圍時，AngularJS不再期望發生變化。所以它不會立即更新用戶界面，而是在下一個「更新週期」中這樣做。

觸發即時更新，呼叫$timeout()或$apply()：與答案一起

angular.module('testApp') 
.controller('TestShowCtrl', function($scope, Ref, $routeParams, $timeout) { 
    //Get ID out of current URL 
    var currentId = $routeParams.id; 

    var ref = new Firebase(Ref + 'events').child(currentId); 

    ref.on('value', function(snapshot) { $timeout(function() { 
     var data = snapshot.val(); 
     console.log('data.title: ' + data.title); 
     $scope.title = data.title; 
    })}); 
});