Angular-ui-router beheben, Wert als Zeichenfolge

Diese Frage ist über die features von ui-router-Paket. Von Standard-ui-router nicht unterstützt Saiten für resolve-parameter. Aber wenn man sich den source-code von ui-router, die Sie werden sehen, dass es möglich ist, um diese Funktionalität zu implementieren, ohne direkte änderungen des code.

Nun, ich werde Ihnen zeigen, die Logik hinter vorgeschlagene Methode und die Implementierung

Analyse der code

Zuerst werfen wir einen Blick auf $Staat.transitionTo Funktion angular-ui-router/src/urlRouter.js. Innerhalb dieser Funktion werden wir sehen, dieser code

  for (var l = keep; l < toPath.length; l++, state = toPath[l]) {
    locals = toLocals[l] = inherit(locals);
    resolved = resolveState(state, toParams, state === to, resolved, locals, options);
  }

Offensichtlich ist dies, wo die "resolve" - Parameter gelöst werden für jeden Elternteil Zustand. Als Nächstes werfen wir einen Blick auf resolveState Funktion in der gleichen Datei. Wir finden diese Linie gibt:

dst.resolve = $resolve.resolve(state.resolve, locals, dst.resolve, state);
var promises = [dst.resolve.then(function (globals) {
    dst.globals = globals;
})];

Dies ist speziell, wo die Versprechungen für die Lösung Parameter abgerufen werden. Was ist gut für den Einsatz, die Funktion, die dies tut, wird genommen, um eine eigenständige Dienstleistung. Das heißt, wir können Haken und verändern, es ist Verhalten mit decorator.

Referenz für die Umsetzung von $lösen ist, wird in angular-ui-router/src/resolve.js Datei

Umsetzung der Haken

Die Signatur zu beheben Funktion von $lösen ist

this.resolve = function (invocables, locals, parent, self) {

Wo "invocables" ist, wird das Objekt aus der Unabhängigkeitserklärung des Staates. Wir müssen also prüfen, ob "invocables" ist string. Und wenn es ist, wir bekommen eine controller-Funktion durch string und rufen Sie die Funktion nach dem ". " - Zeichen

//1.1 Main hook for $resolve
$provide.decorator('$resolve', ['$delegate', '$window', function ($delegate, $window){ 
  var service = $delegate; 



  var oldResolve = service.resolve;
  service.resolve = function(invocables, locals, parent, self){
     if (typeof(invocables) == 'string') {
       var resolveStrs = invocables.split('.');

       var controllerName = resolveStrs[0];
       var methodName = resolveStrs[1];

       //By default the $controller service saves controller functions on window objec
       var controllerFunc = $window[controllerName];
       var controllerResolveObj = controllerFunc[methodName]();

       return oldResolve.apply(this, [controllerResolveObj, locals, parent, self]);

     } else {
       return oldResolve.apply(this, [invocables, locals, parent, self]);
     }
  };

  return $delegate;
}]);

EDIT:

Können Sie auch überschreiben, $controllerProvider mit Anbieter wie diese:

app.provider("$controller", function () {

}

Diese Weise wird es möglich, fügen Sie eine neue Funktion getConstructor, das wird Rückkehr controller-Konstruktor mit Namen. Und so werden Sie vermeiden Sie die Verwendung von $window-Objekt in der hook:

$provide.decorator('$resolve', ['$delegate', function ($delegate){ 
    var service = $delegate; 

    var oldResolve = service.resolve;
    service.resolve = function(invocables, locals, parent, self){
       if (typeof(invocables) == 'string') {
         var resolveStrs = invocables.split('.');

         var controllerName = resolveStrs[0];
         var methodName = resolveStrs[1];

         var controllerFunc = $controllerProvider.getConstructor(controllerName);
         var controllerResolveObj = controllerFunc[methodName]();

         return oldResolve.apply(this, [controllerResolveObj, locals, parent, self]);

       } else {
         return oldResolve.apply(this, [invocables, locals, parent, self]);
       }
    }; 

Vollständige code demonstriert diese Methode http://plnkr.co/edit/f3dCSLn14pkul7BzrMvH?p=preview

Wenn die Absicht ist, wird der resolver in der gleichen Datei wie der controller, der einfachste Weg, dies zu tun ist zu erklären, dass die resolver auf der controller-Datei als eine Funktion:

//my-ctrl.js
var MyCtrl = function($scope, customers) {
  $scope.customers = customers;
}
var resolverMyCtrl_customers = (['Customer','$stateParams', function(Customer, $stateParams) {
    return Customer.get($stateParams.id);
}]);

//routing.js
$stateProvider.state('customers.show', {
  url: '/customers/:id',
  template: template,
  controller: 'MyCtrl',
  resolve: resolverMyCtrl_customers
});