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

Question

我希望在更改角度位置时返回.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'
              }
            }
          })

Answer 1

您可以收听＆＃39; $ stateChangeSuccess＆＃39;并且累积地设置状态。例如 -

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

Answer 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，所以我有更多关于状态的信息（但是我把它留在了这个例子中）。

Answer 3

你也可以试试。

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

现在您可以在控制台中记录它。

console.log($state);

它应该返回你当前的状态。

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

{{state.current.name}}

它也将返回你所处的州。

Answer 4

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

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

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

在控制器中：

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

在模板中：像那样打印

{{state}}