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

Posted

技术标签:

【中文标题】如何从 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

【讨论】:

以上是关于如何从 ui-router statechange 返回 $state.current.name的主要内容,如果未能解决你的问题,请参考以下文章

Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数?

如何使用 AngularJS 的 ui-router 提取查询参数?

如何将自定义数据从ui-router中的视图传递到某个状态?

Angular 2、TypeScript 和 ui-router - 如何获取状态参数

UI-Router:如何在切换视图时保留视图

无法从状态“家”解决“___” - 角度 ui-router 问题