Question

我想听取路线变化并更新$ scope变量以反映我的菜单中的当前路线（md-nav-bar）：

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

输出正确（例如＆＃39; / overview＆＃39;），但视图/菜单未更新。我是否需要手动启动更新？

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-router中的工具：

UI-SREF
UI-SREF活性

您可能已经使用ui-sref在状态之间导航：

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

使用ui-router，你也可以使用ui-sref-active指令，如果状态对应，它将为你的链接添加一个类。

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

当点击state1时，会生成以下html：

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

然后，您可以随意设置活动类的样式。

在$ scope。$ on函数中更改$ scope.variable不会更新视图

1 个答案: