Wie gebe ich $ state.current.name von ui-router statechange zurück

Question

Ich möchte die .state('name') zurückgeben, wenn ich den Standort in eckig ändere.

Aus meiner run() kann es geben die $state Objekt:

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

aber wenn ich versuche $state.current zu bekommen, ist es leer Objekt

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

     console.log($state.current); 

Konfigurationsbeispiel:

.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

Sie können für '$ stateChangeSuccess' hören und accrodinglyafter Zustand gesetzt. Zum Beispiel -

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

Answer 2

Als Alternative zu Sandeep-Lösung, können Sie es auch so:

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

es auf diese Weise tun, es wird nur einmal festgelegt, anstatt auf jeder stateChange. Im Grunde speichern Sie nur einen Verweis auf $ state irgendwo - ich wählte $ rootScope, nur um dieses Beispiel einfach zu halten.

Jetzt in meinem Code kann ich es einfach gerne verweisen:

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

und

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

Ich speichere auch allgemein stateParams $ als auch, damit ich noch mehr Informationen über den Zustand haben (aber ich habe es aus diesem Beispiel weggelassen).

Answer 3

Sie können es auch versuchen.

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

Jetzt können Sie es in Ihrer Konsole anmelden.

console.log($state); 

Es sollte den aktuellen Zustand zurückkehren Sie sind in.

Oder Sie können wie folgt den Umfang in Ihre HTML-Ansicht aufrufen.

{{state.current.name}} 

Es gibt auch de Zustand zurück, in dem Sie sich befinden.

Answer 4

Wenn Sie Ihren Zustand in der Steuerung trösten wollen, dann sollten Sie so trösten:

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

Und wenn Sie wollen, dass es in Aussicht trösten dann:

In Controller:

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

In Vorlage: drucken wie die

{{state}}