Javascript Girl
  1. Javascript Girl
  3. Contrôleur de charge basé sur les paramètres d'état à l'aide de Ui-Routeur Angulaire
Intereting Posts
L'opération de "=" en javascript Définissez certaines options spécifiques dans plusieurs sélections comme désactivées et sélectionnées Comment ajouter un groupe de marqueurs dans google maps v3 pour le même fichier lat / long sans influencer un autre élément? Comment appeler une fonction sur une portée directive à partir du contrôleur Convertir la couleur de l'image sans changer son fond transparent DataTables: Uncaught TypeError: Impossible de lire les "valeurs par défaut" de la propriété de undefined Création de nouveaux objets à l'aide de littératures objet Javascript: trier le tableau et renvoyer un tableau d'indices qui indique la position des éléments triés par rapport aux éléments d'origine Dialogue modal Jquery UI, mettez l'accent sur l'élément de première forme JQuery grep (…) VS fonctionnalité native du filtre JavaScript (…) Comment puis-je obtenir un modèle à partir d'une collection Backbone.js par son identifiant? Convertissez les commandes Lat / Longs en X / Y RaphaelJS rotation ne fonctionne pas IOS: désactivez le routage de rebond mais autorisez le défilement normal Trouble combinant Require.js et Backbone.js / Underscore.js

Contrôleur de charge basé sur les paramètres d'état à l'aide de Ui-Routeur Angulaire

J'essaie de charger un contrôleur en fonction d'un stateparam pour le rendre réutilisable 

.state("dashboard.item.detail", { url: "/detailId/:detailId/detailName/:detailName", views: { 'main@': { templateUrl: function ($stateParams){ //move this to a util function later var tempName = unescape($stateParams.detailName); tempName = tempName.replace(/\s/g, "-"); return '../partials/slides/' + tempName + '.html'; }, resolve: { DetailData: ['DetailService', function(DetailService){ return DetailService.getDetails(); }] }, controller: function ($stateParams) { console.log( $stateParams.detailName + 'Ctrl'); return $stateParams.detailName + 'Ctrl'; } } } })

Manette 

  .controller('NemtCtrl', ['$scope', '$rootScope', 'DetailData', function ($scope, $rootScope, detailData) { console.log(detailData); }]);

Le contrôleur fonctionnera si je retire la fonction et que j'utilise simplement (la console enregistrera detailData) 

 controller: 'NemtCtrl'

Mais ne fonctionnera pas si je le fais: 

 controller: function ($stateParams) { return 'NemtCtrl'; }

Qu'est-ce que je fais mal ici? Y a-t-il une meilleure manière de faire cela?

Ce qui se passe ici, c'est que lorsque vous écrivez ceci: 

 controller: 'NemtCtrl'

Vous dites angulaire pour obtenir le contrôleur nommé 'NemtCtrl'. Mais quand, d'un autre côté, écrivez ceci: 

 controller: function ($stateParams) { return 'NemtCtrl'; }

Vous définissez un contrôleur pour cet état.

Mettre à jour

Selon les ui-router docs, la façon de faire est la suivante: 

 $stateProvider.state('contacts', { template: ..., controllerProvider: function($stateParams) { var ctrlName = $stateParams.type + "Controller"; return ctrlName; } })

Vous pouvez en savoir plus à ce sujet ici

Mise à jour 2

Pour votre cas, ce serait quelque chose comme: 

 .state("dashboard.item.detail", { url: "/detailId/:detailId/detailName/:detailName", views: { 'main@': { templateUrl: function ($stateParams){ //move this to a util function later var tempName = unescape($stateParams.detailName); tempName = tempName.replace(/\s/g, "-"); return '../partials/slides/' + tempName + '.html'; }, resolve: { DetailData: ['DetailService', function(DetailService){ return DetailService.getDetails(); }] }, controllerProvider: //Change to controllerProvider instead of controller function ($stateParams) { //console.log( $stateParams.detailName + 'Ctrl'); return $stateParams.detailName + 'Ctrl'; } } } })