如何从 ui-router statechange 返回 $state.current.name

Posted 2023-02-22

【中文标题】如何从 ui-router statechange 返回 $state.current.name

【英文标题】：how do return the $state.current.name from ui-router statechange

【发布时间】：2014-09-13 18:38:59

【问题描述】：

当我改变角度位置时，我想返回.state('name')。

从我的run() 可以返回$state 对象：

 .run(function($rootScope, Analytics, $location, $stateParams, $state) 
      console.log($state);

但是当我尝试获取$state.current 时，它是空对象

.run(function($rootScope, $location, $stateParams, $state) 

      console.log($state.current);

配置示例：

 .config(function($stateProvider, $urlRouterProvider, AnalyticsProvider)   
        $urlRouterProvider.otherwise('/');
        $stateProvider
        .state('home', 
            url: '/',
            views: 
              '': 
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
              ,
              'navigation@home': 
                templateUrl: 'views/partials/navigation.html',
                controller: 'NavigationCtrl'
              ,
              'weekly@home': 
                templateUrl: 'views/partials/weekly.html',
                controller: 'WeeklyCtrl'
              ,
              'sidepanel@home': 
                templateUrl: 'views/partials/side-panel.html',
                controller: 'SidePanelCtrl'
              ,
              'shoppanel@home': 
                templateUrl: 'views/partials/shop-panel.html',
                controller: 'ShopPanelCtrl'
              ,
              'footer@home': 
                templateUrl: 'views/partials/footer.html',
                controller: 'FooterCtrl'
              
            
          )

【参考方案1】：

您可以监听“$stateChangeSuccess”并相应地设置状态。比如——

$rootScope.$on('$stateChangeSuccess',
  function(event, toState, toParams, fromState, fromParams) 
    $state.current = toState;
  
)

【讨论】：

您能否解释一下为什么问题中的代码不起作用？

已被弃用；你现在需要使用 IHookRegistry @danm07 angular-ui.github.io/ui-router/feature-1.0/interfaces/…

这个 sn-p 将在页面加载时显示每个状态的名称... $rootScope.$on('$stateChangeSuccess', function() alert($state.current.名称）；）；

【参考方案2】：

作为 Sandeep 解决方案的替代方案，您也可以这样做：

angular.module('yourApp').run(['$rootScope', '$state',
    function ($rootScope, $state) 
        $rootScope.$state = $state;
    
]);

这样做，它只会被设置一次，而不是在每个 stateChange。基本上，您只需在某处存储对 $state 的引用 - 我选择 $rootScope 只是为了让这个示例保持简单。

现在在我的代码中我可以很容易地引用它：

<div ng-show="$state.includes('accounting.dashboard')"></div>

和

<div>Current State: $state.current.name</div>

我通常也存储 $stateParams，因此我有更多关于状态的信息（但我没有在这个例子中使用它）。

【讨论】：

你的意思是：它只设置一次，而不是每次 stateChange？

因为 run() 在所有 Angular 模块加载完成后只被框架调用一次。这使它成为一劳永逸地设置快捷方式对象$rootScope.$state = $state; 之类的完美位置。另一方面，$rootScope.$on('$stateChangeSuccess') ... 是每次状态更改时调用的事件处理程序。

【参考方案3】：

你也可以试试。

.controller('yourApp', function($scope,$state) 
  $scope.state = $state;

现在您可以在控制台中登录了。

console.log($state);

它应该返回您当前所处的状态。

或者您可以像这样在 html 视图中调用范围。

state.current.name

它也会返回你所处的状态。

【参考方案4】：

如果你想在控制器中控制你的状态，那么你应该这样控制：

console.log($state.current.name);

如果你想在视图中控制它，那么：

在控制器中：

$scope.state = $state.current.name;

在模板中：这样打印

state