Using 'controller as' with the ui-router isn't working as expected

Question

I have the following state setup for a page using an abstract state and the controller as syntax:

# Details page route
.state \'title\', 
  url: \'/title\',
  ab         


        

Answer 1

You will have to return this; at the end of your controller function for the controllerAs syntax to work.

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

If you are working with $scope, you'll have to return $scope instead.

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

Good Luck.

Answer 2

In your state configuration :

Instead of controller: 'Title as t', try :

controller: 'Title',
controllerAs: 't'

Edit : Just implemented a minimal app with ui-router and the syntax controller: Title as t also works, in versions 0.2.0 of ui-router to the most recent one as of today. I can see the t instance when I inspect angular scopes.

Answer 3

If this helps anyone my problem came about from using templated views but specifying the controllerAs outside the views element. This took forever to figure out. Credit to this thread https://github.com/driftyco/ionic/issues/3058

** WRONG **

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

** RIGHT **

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

Answer 4

Seems like these answers might be working for a lot. I came here with a different problem :

In my UI Router Javascript file, my controllers are defined like this :

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

And in my template file if I try to access the controller with the name groupHomeController it is not able to access.

But on the other hand when I changed my code to this :

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

It works perfectly fine.

Answer 5

Your controller needs to return the value of this in order for the controllerAs feature to work properly. Since CoffeeScript implicitly returns the last line, you need to write:

return this

or if you are using the vm syntax and have written:

vm = this

you can write at the very end of the controller:

return vm