在$ scope中更改$ scope.variable $ on函數不更新視圖

Question

我想監聽路由更改並更新$ scope變量以反映我的菜單（md-nav-bar）中的當前路由：

$scope.$on('$routeChangeSuccess', function(event, current) { 
    $scope.currentNavItem = $location.path(); 
    console.log('current location path', $scope.currentNavItem); 
}); 

輸出是正確的（例如'/ overview'），但是，視圖/菜單沒有更新。我是否需要手動啓動更新？

Answer 1

如果您在事件函數（setTimeOut，$ scope。$ on ...等）中更改了作用域變量，則必須手動調用$scope.$apply()，以便在該作用域中更新該變量。

$scope.$on('$routeChangeSuccess', function(event, current) { 
    $scope.currentNavItem = $location.path(); 
    $scope.$apply(); 
}); 

如果這在某種程度上導致了error "digest already in progress"你可以用一個超時功能代碼周圍設置您的變量：

$scope.$on('$routeChangeSuccess', function(event, current) { 
    $timeout(function() { 
    $scope.currentNavItem = $location.path(); 
    }) 
} 

然而，範圍/ rootScope事件不應該被用於次要的變量更新。它不具有可擴展性，並且最終會隨處可見噸事件監聽器。

在這種特殊情況下，你應該在您的處置在UI路由器使用的工具：

• UI-SREF
• UI-S REF-活躍

你可能已經使用ui-sref來在狀態之間導航：

<a ui-sref="state1">state1</a> 
<a ui-sref="state2">state2</a> 

使用ui-router，您還可以使用t他ui-sref-active指令，將添加一個類到您的鏈接，如果國家相應。

<a ui-sref="state1" ui-sref-active="active">state1</a> 
<a ui-sref="state2" ui-sref-active="active">state2</a> 

當狀態1點擊生成以下HTML：

<a ui-sref="state1" ui-sref-active="active" class="active">state1</a> 
<a ui-sref="state2" ui-sref-active="active" class="">state2</a> 

然後，您可以將樣式類活躍但是請你。