web-dev-qa-db-fra.com

comment retourner le $ state.current.name à partir de statechange ui-router

Je voudrais retourner la .state('name') lorsque je change d'emplacement angulaire.

De ma run() il peut retourner l'objet $state:

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

working object

mais quand j'essaie d'obtenir $state.current c'est un objet vide 

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

      console.log($state.current);

empty

exemple de configuration: 

 .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'
              }
            }
          })
javascriptangularjsroutesangular-ui-router
33
Matthew Harwood

Vous pouvez écouter '$ stateChangeSuccess' et définir l’état en conséquence. Par exemple -

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

Comme alternative à la solution de Sandeep, vous pouvez également le faire de la manière suivante:

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

En le faisant de cette façon, il ne sera défini qu’une fois au lieu deeverystateChange. En gros, vous stockez simplement une référence à $ state quelque part - j'ai choisi $ rootScope uniquement pour garder cet exemple simple.

Maintenant, dans mon code, je peux facilement le référencer comme:

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

et

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

De plus, je stocke généralement aussi $ stateParams, de sorte que j'ai encore plus d'informations sur l'état (mais je l'ai laissé de cet exemple).

10
PRB

Tu peux aussi essayer.

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

Maintenant, vous pouvez vous connecter à votre console.

console.log($state);

Il devrait retourner l'état actuel dans lequel vous vous trouvez.

Ou vous pouvez appeler la portée dans votre vue html comme ceci.

{{state.current.name}}

Il retournera également de l'état dans lequel vous vous trouvez.

1
Kudos

Si vous voulez consoler votre état dans le contrôleur, alors vous devriez console comme ça:

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

Et si vous voulez le consoler en vues, alors:

Dans le contrôleur:

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

Dans le modèle: imprimer comme ça

{{state}}
0
Kumar Rakesh