Angular $ routeParams gibt ein leeres Objekt zurück

Question

Ich bin seit ungefähr einem Tag an einem Problem fest, das ich nicht durchschauen kann.

Ich habe den folgenden Code in einer Datei users.js.coffee:

app = angular.module("app", ["ngResource"]) 
app.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) -> 
    $locationProvider.html5Mode(true) 
    $routeProvider.when('/users/:id', {templateUrl: '/users/:id.json', controller: UserCtrl}) 
    $routeProvider.when('/users/:id/videos', {templateUrl: '/users/:id/videos.json', controller: UserCtrl}) 
] 

app.factory "User", ["$resource", ($resource) -> 
    $resource("https://stackoverflow.com/users/:id", {id: "@id"}, { 
    show: {method: "GET"}, 
    videos: {method: "GET", isArray:true} 
    }) 
] 

@UserCtrl = ["$scope", "$location", "$route", "http", "$routeParams", "User", ($scope, $location, $route, $http, $routeParams, User) -> 
    console.log($location)//LocationUrl {$$parse: function, $$compose: function, $$rewriteAppUrl: function, $$protocol: "http", $$host: "localhost"…} 

    console.log($route)//Object {routes: Object, reload: function} 
    console.log($routeParams)//Object {} 

] 

Warum $ routeParams ein leeres Objekt sein würde? Wenn ich $ route.current.params in einer Ansicht aufruft, werden die entsprechenden Parameter angezeigt. Aber nicht im Controller. Außerdem kann ich $ route.current.params nicht im Controller aufrufen, weil "current" noch nicht definiert ist.

Answer 1

Ihre Routen zeigen auf Ihre api-Route. Sie sollten einen Pfad zu der Vorlage sein, anstatt zu machen:

@App = angular.module('app',['ngResource']) 
    .config(['$routeProvider'], ($routeProvider) -> 
    $routeProvider 
     .when('/users', 
     templateUrl: 'users/index.html', 
     controller: 'UsersIndexCtrl') 
     .when('/users/:id', 
     templateUrl: 'users/show.html', 
     controller: 'UsersShowCtrl') 
     .otherwise(
     redirectTo: '/users' 
    )]) 

Dann sagen wir, würde die Benutzer-Index-Controller wahrscheinlich wie folgt aussehen:

App.controller 'UsersIndexCtrl',['$scope','$location','User', ($scope, $location, User) -> 

    $scope.users = User.query() 

    $scope.onClickHandlerToRoute = (user)-> 
    $location.path "path/to/show/user/#{user.id}" 

Sie können $ http wie Sie injizieren müssen verwenden bereits die ngResource-REST-Abstraktion.

Answer 2

Ich hatte das gleiche Problem. Das Routing funktioniert nicht, wenn keine ng-view vorliegt. Habe gerade eine ng-view bekommen Sie Ihre $ routeParams.

Grüße

Answer 3

Es ist wie $ routeParams aussieht, ist bei Reglerinitialisierung Zeit Controller außerhalb derer geroutet über $ routeProvider/ng-Ansicht nicht verfügbar. (Zumindest in Winkel 1.0.8)

Wenn die Routenparameter in diesen äußeren Controller zugreifen möchten, können Sie $location.search().<param_name>

Answer 4

verwenden Wenn Sie einen externen Controller zum geroutet zu verwenden ng-View-Controller (wie eine Topbar oder ein Seiten-Controller), müssen Sie die '$ routeChangeSuccess' -Emitter-Nachricht abonnieren.

Der Erfolg der Routenänderung ist asynchron, wenn Sie nicht der empfangende Controller sind. Diese SO-Antwort gibt eine vollständigere Antwort: $routeParams is empty in main controller

aber das ist die Tldr;

$scope.$on('$routeChangeSuccess', function() { 
    // $routeParams should be populated here 
});