通过$ 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; 
    }); 
}