come restituire $ state.current.name da ui-router statechange

Question

Desidero restituire il .state('name') quando cambio posizione in angolare.

Dal mio run() può restituire l'oggetto $state:

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

ma quando provo ad ottenere $state.current è oggetto vuoto

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

     console.log($state.current); 

config esempio:

.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

È possibile ascoltare per '$ stateChangeSuccess' e impostare lo stato accrodingly. Per esempio -

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

Answer 2

In alternativa alla soluzione di Sandeep, è anche possibile fare in questo modo:

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

Facendo in questo modo, solo viene impostata una volta invece che su ogni stateChange. Fondamentalmente è sufficiente memorizzare un riferimento a $ stato da qualche parte - Ho scelto $ rootScope solo per mantenere semplice questo esempio.

Ora nel mio codice posso facilmente riferimento ad esso come:

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

e

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

ho anche generalmente memorizzare $ stateParams pure in modo non ho ancora più informazioni sullo stato (ma io lasciato fuori da questo esempio).

Answer 3

Puoi anche provare.

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

Ora è possibile accedere alla console.

console.log($state); 

Esso dovrebbe restituire lo stato attuale ci si trova.

oppure è possibile chiamare l'ambito della tua visualizzazione HTML come questo.

{{state.current.name}} 

Restituirà anche lo stato in cui ci si trova.

Answer 4

Se si vuole consolare il tuo stato nel regolatore allora si dovrebbe consolarsi così:

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

E se si vuole consolare in vista poi:

In regolatore:

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

In Template: stampa come quella

{{state}}