angolare $ routeParams è vuoto

ho una molto semplice applicazione angolare che ho distillato al seguente:

var napp = angular.module('Napp',['ngResource']); 

var CompanyCtrl = function($scope, $routeParams, $location, $resource) { 
    console.log($routeParams); 
}; 


napp.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
    .when('/company/edit/:id', 
     {templateUrl: '/partials/edit', controller: 'CompanyCtrl'} 
    ); 
}]);

e il codice HTML:

<div ng-controller="CompanyCtrl"></div>

quando accedo $ routeParams, si tratta in bianco. Quando uso .otherwise(), caricherà tutto ciò che ho specificato lì. Qualche idea di cosa mi stia perdendo?

fonte

2013-06-11 wesbos

u può vedere che cosa hai trovato in $ route.current.params.id –

Dov'è $ percorso? – wesbos

Vedere se questo risolve il problema: http: // deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-AGGIORNATO # routing –

Prima di tutto provare questo con

$locationProvider.html5Mode(true);

Questo dovrebbe risolvere il codice di partenza. Quindi regola il tuo codice per supportare i browser non pushState.

Spero che questo aiuti!

fonte

2013-06-17 18:45:49 vladikoff

Come e dove usarlo? – Sami

Hai un paio di errori:

Hai specificato il controller in due posti, sia nella vista (<div ng-controller="CompanyCtrl"></div>) e $ routeProvider (.when('/company/edit/:id', {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}). Rimuoverò quello nella vista.
Devi registrare il controller nel modulo quando lo specifichi in $ routeProvider (dovresti farlo comunque, è meglio evitare i controller globali). Do napp.controller('CompanyCtrl', function ... anziché var CompanyCtrl = function ....
è necessario specificare un ng-view quando si utilizza il servizio di $ percorso (non so se si sta facendo questo o no)

Il nuovo codice:

var napp = angular.module('Napp', ['ngResource']); 

napp.controller('CompanyCtrl', function ($scope, $routeParams, $location, $resource) { 
    console.log($routeParams); 
}); 

napp.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/company/edit/:id', 
     {templateUrl: '/partials/edit', controller: 'CompanyCtrl'} 
    ); 
}]);

il modello (/ parials/Edit)

<div> ... </div>

e l'App (index.html o qualcosa del genere)

... <body> <div ng-view></div> </body>

ho creato un esempio plunker di lavoro: http://plnkr.co/edit/PQXke2d1IEJfh2BKNE23?p=preview

fonte

2013-06-17 18:37:15 joakimbl

utilizzando ng-view quando si utilizza il servizio $ route era una cosa importante che avevo bisogno di capire ma non era evidente a me. Inoltre non ho mai capito che quando si utilizza il routing si dovrebbe dichiarare il controller solo in $ routeProvider e non anche nella vista. ha senso. Grazie! – FireDragon

funziona per me http://plunker.co/edit/ziLG1cZg8D8cYoiDcWRg?p=preview

Ma avete alcuni errori nel codice:

Il tuo non sembrano avere un ngView nel codice. $routeProvider utilizza ngView per sapere dove deve essere inserito il contenuto del modello. Quindi ne hai bisogno da qualche parte nella tua pagina.
Stai specificando il tuo CompanyCtrl in due posti. Dovresti specificarlo nello $routeProvider o nel tuo modello usando ng-controller. Mi piace specificarlo nel modello, ma è solo una preferenza personale.
Anche se non si tratta di un errore, si specifica il proprio CompanyCtrl nell'ambito globale, invece di registrarlo sul modulo Napp utilizzando Napp.controller(name, fn).

Spero che questo aiuti!
Si può sempre andare sul #angularjs canale IRC su freenode: c'è sempre persone attive pronto ad aiutare

fonte

2013-06-17 19:03:27 rodyhaddad

Non sono sicuro se questo aiuta, ma ho appena imbattuto in questo problema me stesso, e ha scoperto che non ho potuto registrare il percorso params fino a quando non ho avuto qualcosa legato a loro.
Così,

Router:

var myApp = angular.module('myApp', []); 
myApp.config(function($routeProvider){ 

    $routeProvider.when('/projects/:id', 
    {templateUrl: '/views/projects/show.html', controller: 'ProjectCtrl'} 
); 

});

Controller:

myApp.controller('ProjectCtrl', function($scope, $routeParams){ 
    $scope.id = $routeParams.id; 
    console.log('test'); 
});

Vista:

<h1>{{ id }}</h1>

Quando ho rimosso il '{{id}}' dal punto di vista, non è stato registrato nulla e $ routeParams era vuoto, almeno al momento dell'istanza del controller zione. Come indicato da alcune delle risposte precedenti, i parametri di instradamento sono passati in modo asincrono, quindi un controllore senza collegamenti a quella proprietà non verrà eseguito. Quindi, non sono sicuro di cosa hai distillato il tuo frammento, ma spero che questo aiuti!

fonte

2013-06-18 19:39:09 richgilbank

Potrebbe essere che il tuo templateUrl punti a un modello non valido?

Quando si modifica templateUrl in un file inesistente, si noterà che lo $routeParams non verrà più popolato (poiché AngularJS rileva un errore durante la risoluzione del modello).

ho creato un plnkr di lavoro con il codice per la vostra convenienza che si può solo copiare e incollare per ottenere il vostro lavoro di applicazione:

http://plnkr.co/edit/Yabp4c9zmDGQsUOa2epZ?p=preview

Non appena si fa clic sul collegamento nel esempio, è vedrà il router in azione.

Spero che questo aiuti!

fonte

2013-06-23 12:21:14 jvandemo

Questo può accadere (non nel caso dell'OP) se si utilizza ui-router anziché ngRoute.

Se questo è il caso, utilizzare $stateParams anziché $routeParams.

https://stackoverflow.com/a/26946824/995229

fonte

2015-09-06 18:43:25 Kof

Naturalmente sarà vuoto. RouteParams viene caricato in modo asincrono, quindi è necessario attendere per ottenere i parametri. Mettere questo nel controller:

$scope.$on('$routeChangeSuccess', function() { 
    console.log($routeParams); 
});

fonte

2016-07-10 02:43:00 codingpuss

angolare $ routeParams è vuoto

risposta

Problemi correlati