web-dev-qa-db-ja.com

UIルーターで「コントローラーとして」を使用すると、期待どおりに機能しません

抽象状態とコントローラーを構文として使用するページの次の状態設定があります。

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

このデモの目的のために、「Title」コントローラーの「t」インスタンスに変数を割り当て、タイトルコントローラー関数内でこれを行うとしましょう。

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ライブラリのバージョンの違いを見つけようとしています。

angularjsangular-ui-routerangular-routing
23
HomeBrew

ControllerAs機能が正しく機能するためには、コントローラーはthisの値を返す必要があります。 CoffeeScriptは暗黙的に最終行を返すため、次のように記述する必要があります。

return this

または、vm構文を使用していて、次のように書いている場合：

vm = this

コントローラの最後に書くことができます：

return vm
12
Nick Litwin

これが誰かに役立つ場合、私の問題はテンプレート化されたビューを使用することから生じましたが、views要素の外側にcontrollerAsを指定します。これを理解するのに永遠にかかりました。このスレッドの功績 https://github.com/driftyco/ionic/issues/3058

** 違う **

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

** 正しい **

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

これらの答えは大いに役立つようです。私は別の問題でここに来ました：

私のUI Router Javascriptファイル、私の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'

完璧に機能します。

1
arqam

controllerAs構文が機能するには、return this;の最後にcontroller functionが必要です。

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

幸運を。

0
Akash