it-swarm.com.de

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

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

Von meiner run() kann das $state-Objekt zurückgegeben werden:

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

working object

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

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

      console.log($state.current);

empty

config Beispiel:

 .config(function($stateProvider, $urlRouterProvider, AnalyticsProvider) {  
        $urlRouterProvider.otherwise('/');
        $stateProvider
        .state('home', {
            url: '/',
            views: {
              '': {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
              },
              '[email protected]': {
                templateUrl: 'views/partials/navigation.html',
                controller: 'NavigationCtrl'
              },
              '[email protected]': {
                templateUrl: 'views/partials/weekly.html',
                controller: 'WeeklyCtrl'
              },
              '[email protected]': {
                templateUrl: 'views/partials/side-panel.html',
                controller: 'SidePanelCtrl'
              },
              '[email protected]': {
                templateUrl: 'views/partials/shop-panel.html',
                controller: 'ShopPanelCtrl'
              },
              '[email protected]': {
                templateUrl: 'views/partials/footer.html',
                controller: 'FooterCtrl'
              }
            }
          })
33
Matthew Harwood

Sie können auf $ stateChangeSuccess warten und den Status entsprechend einstellen. Zum Beispiel -

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

Alternativ zur Lösung von Sandeep können Sie dies auch folgendermaßen tun:

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

Auf diese Weise wird es nur einmal gesetzt statt aufeverystateChange. Im Grunde speichern Sie einfach irgendwo einen Verweis auf $ state - ich habe $ rootScope gewählt, um dieses Beispiel einfach zu halten.

Jetzt kann ich es in meinem Code leicht wie folgt referenzieren:

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

und

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

Ich speichere auch generell $ stateParams, so dass ich noch mehr Informationen über den Zustand habe (aber ich habe es aus diesem Beispiel herausgelassen).

10
PRB

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 Status zurückgeben, in dem Sie sich befinden.

Oder Sie können den Gültigkeitsbereich in Ihrer HTML-Ansicht auf diese Weise aufrufen.

{{state.current.name}}

Es wird auch der Status zurückkehren, in dem Sie sich befinden.

1
Kudos

Wenn Sie Ihren Status im Controller konsolidieren möchten, sollten Sie die folgende Konsole verwenden:

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

Und wenn Sie es in Ansichten trösten möchten, dann:

Im Controller:

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

In Template: so drucken

{{state}}
0
Kumar Rakesh