javascript - Angular UI 路由器状态导航

Question

我在 Angular UI router 中有两个状态:

State
|-Menus (with 2 nested state)
|   |- menus.list
|   |- menus.instruction
|-Order

当我从菜单访问 menus.list 时，我得到了 ID 为 4 的范围，但是当我从 Order 访问菜单时，我得到了范围 ID 为 28 的范围。

这对我来说是个问题，因为我在 Menus Controller 中注册了以下函数。

$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
    if(toState.name === 'menus.list'){
        $scope.stateOrder = 1;
    }
    if(toState.name === 'menus.instruction'){
        $scope.stateOrder = 2;
    }
});

我面临的问题是，当我从 Menus 访问 menus.list 时，它会更新模板文件中的 $scope.stateOrder，但是当我输入 menus 时Order 中的 .list 声明它不会更新我在模板中的 $scope.stateOrder。为什么会这样？

Answer 1

我想你想把带有 $rootScope 的代码放在你的 Angular 应用程序的 config 部分下的运行阶段，这将触发设置的回调函数你的州命令。例如:

angular.module('yourApp', ['ui.router'])
.config(function($stateProvider, $urlProvider) {
  //details omitted
}).run(function($rootScope, $urlRouter, $state, $stateParams) {
   $rootScope.$on('$stateChangeSuccess', function(e, toState) {
     e.preventDefault();

     if(toState.name === 'menus.list'){
        $scope.stateOrder = 1;
    }
    if(toState.name === 'menus.instruction'){
        $scope.stateOrder = 2;
    }

   })
});