通過$ rootScope捕獲的事件對$ scope變量所做的更改不會在視圖中更新

Question

我有一些舊的離子App（離子v 1.3.x）。根據在App的另一部分中檢測到的某些異步更改，它會發出$ rootScope級別事件。我在控制器中捕獲該事件以更新該事件被捕獲時的視圖。沿着下面的行。

// In a different part of the App an asynchronous event is caught 
$rootScope.$emit("some:change:event", grpKey); // from asynchronous event 

// In Controller 
$rootScope.$on("some:change:event", function(event, param){ 
    reComputeValues(param); 
} 

function reComputeValues(param){ 
    $scope.someVariable = updated value; 
    //$scope.$apply(); 
} 

function reComputeValues_withApply(param){ 
    $scope.$apply(function(){ 
     $scope.someVariable = updated value; 
    }); 
} 

即使$ scope.someVariable被更新（我可以看到它通過它在調試器步進時），當我在視圖中的更改不會反映在視圖中。如果我離開那個視圖並回到視圖，那麼頁面將重新加載並且更改就在那裏。

在挖掘它之後，首先看起來是$ apply調用應該做的。我這樣做了兩種不同的方式（只需調用$ scope。$在$ apply調用中應用或封裝變量更新）。雖然這確實更新了視圖，但它提供了一些似乎與某個範圍問題有關的錯誤。我意識到這可能是因爲當事件被捕獲並且函數被調用時它在$ rootScope的上下文中並且變量在$ scope級別更新，這就是爲什麼當強制$時它不會自動更新視圖並給出錯誤應用電話。但是$ scope也是$ rootScope的一個子元素，所以我不完全理解$ rootScope和$ scope這裏的交互以及視圖沒有更新的原因。

欣賞關於如何最好地解決此問題的任何指示。

謝謝， Sanjay。

Answer 1

你可以嘗試下面的改變代碼，讓我知道。

$rootScope.$emit("some:change:event", grpKey); // from asynchronous event 

// In Controller 
$rootScope.$on("some:change:event", function(event, param){ 
    $rootScope.$apply(function(){ 
     reComputeValues(param); 
    }); 
} 

function reComputeValues(param){ 
    $scope.someVariable = updated value; 
    //$scope.$apply(); 
} 

function reComputeValues_withApply(param){ 
    $scope.$apply(function(){ 
     $scope.someVariable = updated value; 
    }); 
}