web-dev-qa-db-fra.com

Utiliser 'controller as' avec le routeur ui ne fonctionne pas comme prévu

J'ai la configuration d'état suivante pour une page utilisant un état abstrait et le contrôleur comme syntaxe:

# Details page route
.state 'title', 
  url: '/title',
  abstract: true,
  template: '<ui-view/>',
.state 'title.show', 
  url: '/:titleId',
  templateUrl: 'title/show.html'
  controller: 'Title as t'

Pour les besoins de cette démo, disons que j'assigne une variable à l'instance 't' du contrôleur 'Title' et que je le fais à l'intérieur de la fonction du contrôleur de titre. 

angular.module('title').controller 'Title',
 ['$state', ($state) ->
   this.name = 'Test'

et dans ma vue 'title/show.html', j'essaie d'imprimer la variable que je viens de créer sur la page: 

{{t.name}}

Je ne vois rien. Mais si je supprime le contrôleur de notre routeur ui et sur l'élément qui enveloppe la page 'title/show.html' comme ceci:

<div ng-controller="Title as t">

Ensuite, tout fonctionne bien. Quelqu'un at-il rencontré ce problème avant. Je le fais bien dans une autre application, donc j'essaie toujours de comprendre ce qui pourrait être différent dans cette application, peut-être une différence dans les versions de la bibliothèque js. 

angularjsangular-ui-routerangular-routing
23
HomeBrew

Dans votre configuration d'état:  

Au lieu de controller: 'Title as t', essayez:

controller: 'Title',
controllerAs: 't'

Edit : Vous venez de mettre en place une application minimale avec ui-router et la syntaxe controller: Title as t fonctionne également, dans les versions 0.2.0 de ui-router à la plus récente mise à jour. Je peux voir l'instance t lorsque j'inspecte les portées angulaires.

43
Michael P. Bazos

Votre contrôleur doit renvoyer la valeur this pour que la fonction controllerAs fonctionne correctement. Étant donné que CoffeeScript renvoie implicitement la dernière ligne, vous devez écrire:

return this

ou si vous utilisez la syntaxe vm et avez écrit:

vm = this

vous pouvez écrire à la toute fin du contrôleur:

return vm
12
Nick Litwin

Si cela aide quelqu'un, mon problème provient de l'utilisation de vues basées sur des modèles mais de la spécification des contrôleurs en dehors de l'élément views. Cela a pris une éternité pour comprendre. Crédit à ce fil https://github.com/driftyco/ionic/issues/3058

** FAUX **

views: {'content@': { templateUrl: 'views/listing.html' }},
controller: 'ListingCtrl',
controllerAs: 'ctrl'

** DROITE **

views: {
  'content@': { templateUrl: 'views/listing.html' },
   controller: 'ListingCtrl',
   controllerAs: 'ctrl'
}
10
user2350727

On dirait que ces réponses pourraient marcher beaucoup. Je suis venu ici avec un problème différent: 

Dans mon fichier UI Router Javascript, ma controllers est définie comme suit: 

state('groupHome', {
     url: '/groupHome',
     templateUrl: 'app/modules/group-home/groupHome.html',
     controller: 'GroupHomeController',
     controllerAs: 'groupHomeController'

Et dans mon fichier de modèle si j'essaie d'accéder au contrôleur avec le nom groupHomeController, il n'est pas en mesure d'y accéder.

Mais par contre quand j'ai changé mon code en ceci: 

state('groupHome', {
     url: '/groupHome',
     templateUrl: 'app/modules/group-home/groupHome.html',
     controller: 'GroupHomeController as groupHomeController'

Cela fonctionne parfaitement bien.

1
arqam

Vous devrez return this; à la fin de votre controller function pour que la syntaxe controllerAs fonctionne.

angular.module('title').controller 'Title',
 ['$state', ($state) ->
   this.name = 'Test'
   return this

Si vous travaillez avec$scope, vous devrez plutôt return $scope.

angular.module('title').controller 'Title',
 ['$state','$scope', ($state, $scope) ->
   $scope.name = 'Test'
   return $scope

Bonne chance.

0
Akash