Использование "controller as" с ui-router работает не так, как ожидалось

У меня есть следующая настройка состояния для страницы с использованием абстрактного состояния и контроллера в качестве синтаксиса:

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

В целях этой демонстрации можно сказать, что я назначаю переменную экземпляру 't' контроллера 'Title', и я делаю это внутри функции контроллера Title.

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

и внутри моего представления 'title/show.html' Я пытаюсь распечатать эту переменную, которую я только что создал на странице:

{{t.name}}

Я ничего не вижу. Но если я удалю контроллер нашего ui-router и на элемент, который обертывает страницу "title/show.html" следующим образом:

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

Тогда все работает отлично. Кто-нибудь сталкивался с этой проблемой раньше. У меня есть работа в другом приложении, поэтому я все еще пытаюсь понять, что может быть другим в этом приложении, возможно, в версиях js-библиотеки.

Ответы

Ответ 1

В вашей конфигурации состояния:

Вместо controller: 'Title as t', попробуйте:

controller: 'Title',
controllerAs: 't'

Edit: просто реализовано минимальное приложение с ui-router и синтаксическим controller: Title as t также работает, в версиях 0.2.0 от ui-router до самого последнего на сегодняшний день. Я могу увидеть экземпляр t когда я проверяю угловые области.

Ответ 2

Контроллер должен вернуть значение this чтобы функция controllerAs работала правильно. Поскольку CoffeeScript неявно возвращает последнюю строку, вам нужно написать:

return this

или если вы используете синтаксис vm и написали:

vm = this

вы можете написать в самом конце контроллера:

return vm

Ответ 3

Если это помогает кому-то, с чем связана моя проблема, использовать шаблонные представления, но указывая контроллер как вне элемента views. Это потребовалось навсегда, чтобы понять. Кредит на эту тему https://github.com/driftyco/ionic/issues/3058

** НЕПРАВИЛЬНО **

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

** ПРАВИЛЬНО **

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

Ответ 4

Похоже, эти ответы могут работать много. Я пришел сюда с другой проблемой:

В моем файле Javascript UI Router мои controllers определяются следующим образом:

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

И в моем файле шаблона, если я попытаюсь получить доступ к контроллеру с именем groupHomeController он не сможет получить доступ.

Но с другой стороны, когда я изменил свой код на это:

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

Он отлично работает.

Ответ 5

Вам придется return this; в конце вашей controller function для синтаксиса controllerAs.

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

Если вы работаете с $scope, вам придется return $scope вместо этого.

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

Удачи.