angularjs - sref - El uso de ''controller as'' con el ui-router no funciona como se esperaba

ui view ui router

Question

Tengo la siguiente configuración de estado para una página que utiliza un estado abstracto y el controlador como sintaxis:

# 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''

Para el propósito de esta demostración, digamos que asigno una variable a la instancia ''t'' del controlador ''Título'' y hago esto dentro de la función del controlador Título.

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

y dentro de mi vista ''title / show.html'' intento imprimir esa variable que acabo de crear en la página:

{{t.name}}

No veo nada Pero si quito el controlador nuestro del enrutador ui y lo coloco en el elemento que envuelve la página ''title / show.html'' de esta manera:

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

Entonces todo funciona muy bien. Alguien se ha encontrado con este problema antes. Lo tengo funcionando bien en otra aplicación, así que todavía estoy tratando de averiguar qué podría ser diferente en esta aplicación, tal vez una diferencia en las versiones de la biblioteca js.

Answer 1

El controlador debe devolver el valor de this para que la función del controlador funcione correctamente. Dado que CoffeeScript devuelve implícitamente la última línea, debe escribir:

return this

o si está utilizando la sintaxis de vm y ha escrito:

vm = this

Puedes escribir al final del controlador:

return vm

Answer 2

Parece que estas respuestas podrían estar funcionando para mucho. Vine aquí con un problema diferente:

En mi archivo Javascript de UI Router , mis controllers se definen así:

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

Y en mi archivo de plantilla, si intento acceder al controlador con el nombre groupHomeController , no puedo acceder.

Pero por otro lado cuando cambié mi código a esto:

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

Funciona perfectamente bien.

Answer 3

Si esto ayuda a alguien, mi problema surgió con el uso de vistas con plantilla, pero especificando los controladores como fuera del elemento de vistas. Esto tomó una eternidad para averiguar. Crédito a este hilo https://github.com/driftyco/ionic/issues/3058

** INCORRECTO **

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

** DERECHO **

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

Answer 4

Tendrás que return this; al final de la controller function del controllerAs para que controller function la sintaxis del controllerAs .

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

Si está trabajando con $scope , tendrá que return $scope lugar.

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

Buena suerte.

Answer 5

En su configuración de estado:

En lugar de controller: ''Title as t'' , intente:

controller: ''Title'',
controllerAs: ''t''

Edición : acabo de implementar una aplicación mínima con ui-router y el controller: Title as t sintaxis controller: Title as t también funciona, en las versiones 0.2.0 de ui-router a la más reciente a la fecha. Puedo ver el ejemplo cuando inspecciono los ámbitos angulares.