2014-10-01 4 views
5

Unbekannter Provider beim Injizieren von Service in die Child-State-Auflösungsfunktion. Aber wenn eine Auflösung im Elternstatus definiert ist, funktioniert es einfach. Im Folgenden gibt es einige Codes Beispiel:UI-Router Unbekannter Anbieter für das Injizieren von Service in untergeordnete Statusauflösung

ich ein Servicemodul definiert

angular.module('services', []) 
    .factory('myService', function() { 
    // my service here 
    }) 

und initialisieren die App

var app = angular.module('app', ['services', 'ui.router']); 
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, 

    $urlRouterProvider) { 
     $stateProvider.state('wizard', { 
     url: '/wizard', 
     abstract: true 
     }) 
     .state('wizard.step1', { 
     url: '/step1', 
     templateUrl: ... , 
     resolve: { 
      name: function(myService) { 
      // do something with mySerice 
      } 
     }, 
     controller: function(name) { 
      // controller codes here 
     } 
     }) 
    }]); 

Ich habe den Fehler Unbekannter Anbieter beschweren sich über myService im wizard.step1 lösen. Aber wenn ich eine zufällige Auflösung im Elternzustand hinzufügen, wie

$stateProvider.state('wizard', { 
      url: '/wizard', 
      abstract: true, 
      resolve: { 
       a: function() { return 1; } 
      } 
      }) 

dann funktioniert es ohne Fehler. Was passiert hier?

+0

Ich kann nicht sehen, was los ist. Wenn Sie eine Geige erstellen, die das Problem zeigt, werde ich es versuchen. –

+0

Stimmen Sie mit @StephenFriedrich überein, das sieht gut aus. Ich habe es in ein Plunk gesetzt: http://plnkr.co/edit/McZ97tJIuSIqnwRkDb8c?p=preview –

+0

Könnte es sein, dass Sie eine ng-Controller in der HTML-Datei Teil? Wenn dies der Fall ist, wird angular versuchen, den Controller nach dem Laden der Ansicht zu instanziieren. An diesem Punkt wird "name" nicht mehr vorhanden sein, sodass Sie den Fehler erhalten. Siehe meine Antwort zu diesem: http://stackoverflow.com/questions/27023887/angularfire-0-9-resolve-with-ui-router – andyhasit

Antwort

1

In Ihrem Controller Sie Ihren Dienst MyService injizieren müssen, so definieren so etwas wie dieses

.state('wizard.step1', { 
    url: '/step1', 
    templateUrl: ... , 
    resolve: { 
     name: ['myService', function(myService) { 
     // do something with mySerice 
     }] 
    }, 
    controller: ['name', function(name) { 
     // controller codes here 
    }] 
    }) 
+0

Seem funktioniert auch nicht. Was ist die Logik hier? –

+0

Sorry, ich habe nicht verstanden, dass das Problem in der Auflösung war, also ändere ich den Code. Sie müssen Ihren Dienst in die aufgelöste Funktion einfügen und in Ihrem Controller müssen Sie die Auflösungsattribute injizieren (zB: "name") –

1

Sie haben Ihren Dienst in Ihrer Konfigurationsfunktion zu injizieren:

var app = angular.module('app', ['services', 'ui.router']); 
app.config(['$stateProvider', '$urlRouterProvider', 'myService', 
      function($stateProvider, $urlRouterProvider, myService) { 
... 

Eine weitere Möglichkeit zum Einbetten ist Ihr Lösungscode in einem Service und weisen Sie direkt den Service zu:

app.config(['$stateProvider', '$urlRouterProvider' ,'mySuperService',function($stateProvider, 

    $urlRouterProvider, mySuperService) { 
    ... 
    resolve: { 
    name: mySuperService() 
    } 


.constant('mySuperService', function() { 

    var serv= function(){ 
     // your code 
    } 
    return serv; 
} 
+1

Der Dienst kann nicht in die Konfiguration eingefügt werden, nur Provider. http://stackoverflow.com/questions/15937267/inject-service-in-app-config –

+0

Sicher. Deshalb habe ich eine "Konstante" verwendet, die in meinem Beispiel eine Funktion definiert. So geht es mir in der aktuellen App. Aber du hast recht, das ist mit einer "Fabrik" oder einem "Service" nicht möglich. – benek

-1

Ich gehe Der gleiche Fehler. Versuchen Sie diesen Code. Es funktioniert gut ...

<script type="text/javascript"> 
      var myApp = angular.module('myApp', ['ui.router']); 
      myApp.config(['$stateProvider','$urlRouterProvider', 
       function ($stateProvider, $urlRouterProvider) { 
        $stateProvider. 
        state('Page1', { 
         url: '/Page1', 
         templateUrl: 'Page1.html' 
        }). 
        state('Page2', { 
         url: '/Page2', 
         templateUrl: 'Page2.html' 
        }) 
       }]); 
     </script> 
Verwandte Themen