Question

我在Angular UI router中有两个州：

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

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

这对我造成问题的原因是因为我在Menus控制器中注册了以下函数。

$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.list输入Order时不会在模板中更新我的$scope.stateOrder。为什么会这样？

Answer 1

我认为您希望将$rootScope的代码置于角度应用的config部分下的运行阶段，这将触发用于设置stateOrders的回调函数。例如：

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;
    }

   })
});

Answer 2

当您在兄弟状态之间切换时，会创建新控制器并创建Menu的新 $ scope 变量。因此，最简单的解决方法是将$stateChangeSuccess逻辑移动到State的控制器，这样 $ scope 将会更新，并且值将在子控制器中可用。

Angular UI路由器状态导航

2 个答案: