AngularJS UI-Router Zugang $ stateParams von Staat Datenobjekt

Question

Angesichts der folgenden Zustand in ui-Router:

.state('some.state', { 
    url: '/some/:viewType', 
    templateUrl: 'myTemplate.html', 
    controller: 'SomeStateController', 
    controllerAs: 'vm', 
    data: { 
     authorizedFor: [SOME_ROLE] 
    } 
} 

Ich versuche, die „Daten“ Objekt für einen Zustand zu verwenden, steuern den Zugriff auf autorisierte zu helfen Zustände. Getrennt handle ich mit dem Ereignis $ stateChangeStart, um data.authorizedFor zu betrachten und entsprechend zu handeln.

Das Problem besteht jedoch darin, dass sich die Liste der autorisierten Rollen basierend auf dem Wert von: viewType ändern kann. Ich dachte, ich könnte Daten: {} eine Funktion sein, injizieren $ stateParams und die Logik dort behandeln ... aber das wird nicht tun.

Also habe ich versucht, stattdessen das params-Objekt zu verwenden, aber an der $ stateChangeStart-Zeit ist der: viewType noch nicht von $ state.params oder $ stateParams erreichbar.

Als ich in den Entwicklungswerkzeugen durchgegangen bin, habe ich bemerkt, dass $ state.transitionTo.arguments gefüllt ist, aber es scheint furchtbar hacky zu sein, diese Route zu gehen.

params: { 
    authorizedFor: function($state) { 
     console.log($state.transitionTo.arguments[1].viewType); // has value I need 
    } 
} 

Irgendwelche Vorschläge?

Answer 1

Mein Vorschlag ist, resolve zu verwenden, um Ihren Controller mit Inhalt oder Daten zu versorgen, die für den Status benutzerdefiniert sind. resolve ist eine optionale Zuordnung von Abhängigkeiten, die in den Controller injiziert werden sollen.

Wenn eine dieser Abhängigkeiten verspricht, werden sie aufgelöst und in einen Wert konvertiert, bevor der Controller instanziiert wird und das $ stateChangeSuccess-Ereignis ausgelöst wird.

zum Beispiel:

$stateProvider 
     .state('profile', { 
      url: '/profile', 
      templateUrl: 'profile.html', 
      resolve:{ 
       'ProfileService': function(ProfileService){ 
        return ProfileService.promise_skillRecommendation_mock; 
       } 
      } 
     }) 

Der Profile Code:

var app = angular.module('app').service("ProfileService", function($http){ 
    var myData = null; 

    var promise_skillRecommendation_mock = 
     $http.get('Mock/skillRecommendation-mock.json') 
      .success(function(data){ 
       myData = data; 
      }); 
    return{ 
     promise_skillRecommendation_mock: promise_skillRecommendation_mock, 
     get_skillRecommendation: function(){ 
      return myData; 
     } 
    }; 
}); 

und der Controller-Code, der diesen Service nutzen werden, sind:

angular.module('app').controller('ProfileController', function($scope, $http, ProfileService){ 


    $scope.skillRecommendation = ProfileService.get_skillRecommendation(); 

Das Objekt in resolve unten muss sein aufgelöst (über deferred.resolve(), wenn sie ein Versprechen sind), bevor der Controller instanziiert wird. Beachten Sie, wie jedes aufgelöste Objekt als Parameter in den Controller injiziert wird.

Mit diesem Code wird die Seite erst angezeigt, nachdem das Versprechen gelöst wurde.

für weitere Informationen sehen Sie bitte diese Seite: https://github.com/angular-ui/ui-router/wiki