web-dev-qa-db-de.com

Die Verwendung von 'Controller as' mit dem UI-Router funktioniert nicht wie erwartet

Ich habe den folgenden Status für eine Seite eingerichtet, die einen abstrakten Status und den Controller als Syntax verwendet:

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

Zu diesem Zweck möchte ich sagen, dass ich der 't'-Instanz des' Title'-Controllers eine Variable zuweise und dies innerhalb der Title-Controller-Funktion. 

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

und in meiner Ansicht 'title/show.html' versuche ich, die von mir erstellte Variable auf der Seite auszudrucken: 

{{t.name}}

Ich sehe nichts Wenn ich den Controller aber von unserem ui-router entferne und auf das Element, das die 'title/show.html'-Seite wie folgt umschließt:

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

Dann funktioniert alles super. Hat jemand dieses Problem schon mal gesehen? Ich habe es gut in einer anderen App funktioniert, also versuche ich immer noch herauszufinden, was in dieser App anders sein könnte, vielleicht einen Unterschied in der js-Bibliothekversion. 

angularjsangular-ui-routerangular-routing
23
HomeBrew

In deiner Zustandskonfiguration:  

Versuchen Sie statt controller: 'Title as t':

controller: 'Title',
controllerAs: 't'

Edit : Nur eine minimale App mit ui-router implementiert und die Syntax controller: Title as t funktioniert auch in den Versionen 0.2.0 von ui-router bis zum aktuellsten. Ich kann die Instanz t sehen, wenn ich Winkelumfänge inspiziere.

43
Michael P. Bazos

Ihr Controller muss den Wert von this zurückgeben, damit die ControllerAs-Funktion ordnungsgemäß funktioniert. Da CoffeeScript implizit die letzte Zeile zurückgibt, müssen Sie Folgendes schreiben:

return this

oder wenn Sie die VM-Syntax verwenden und Folgendes geschrieben haben:

vm = this

sie können am Ende des Controllers schreiben:

return vm
12
Nick Litwin

Wenn dies jemandem hilft, ist mein Problem auf die Verwendung von Templates zurückzuführen, wobei jedoch die Controller außerhalb des Views-Elements angegeben wurden. Das dauerte ewig, um herauszufinden. Dank für diesen Thread https://github.com/driftyco/ionic/issues/3058

** FALSCH **

views: {'[email protected]': { templateUrl: 'views/listing.html' }},
controller: 'ListingCtrl',
controllerAs: 'ctrl'

** RECHT **

views: {
  '[email protected]': { templateUrl: 'views/listing.html' },
   controller: 'ListingCtrl',
   controllerAs: 'ctrl'
}
10
user2350727

Es scheint, als würden diese Antworten für viel arbeiten. Ich bin mit einem anderen Problem hierher gekommen: 

In meiner UI Router-Javascript-Datei sind meine controllers folgendermaßen definiert: 

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

Wenn ich in meiner Vorlagendatei versuche, auf den Controller mit dem Namen groupHomeController zuzugreifen, kann er nicht darauf zugreifen.

Aber andererseits, wenn ich meinen Code so geändert habe: 

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

Es funktioniert perfekt.

1
arqam

Sie müssen return this; am Ende Ihres controller function eingeben, damit die controllerAs-Syntax funktioniert.

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

Wenn Sie mit$scopearbeiten, müssen Sie stattdessen return $scope verwenden.

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

Viel Glück.

0
Akash