Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Using AngularJS 1.1.5 with CoffeeScript I'm trying the use the new 'Controller as ...' syntax as follows:

class EventCtrl
    @$inject = ['$scope', '$http']

    constructor: (@$scope, @$http) ->
        @$http.get('/some/url/', config)
            .success (data) ->
                #set the events directive
                @events = data
            .error (data) ->
                console.log('error!')

app.controller('EventCtrl', EventCtrl)

With the following HTML fragment:

<div ng-controller="EventCtrl as ctrl">
    <div>{{ctrl.events}}</div>
</div>

This works alright except for the fact that changes in @events don't update (the binding point in) the template. The 'data' incoming in the success handler of the @$http.get is looking ok.

This code has been working with a previous version of AngularJS with the regular none-class controllers.

UPDATE One (ugly) solution turns out to be explicity setting this (@) to a local value in the method (thiz in the example below). Not very elegant but it works.

class EventCtrl
    @$inject = ['$scope', '$http']

    constructor: (@$scope, @$http) ->
        thiz = @
        @$http.get('/some/url/', config)
            .success (data) ->
                #set the events directive
                thiz.events = data
            .error (data) ->
                console.log('error!')

SOLUTION Use a fat arrow for the success handler. The constructor is automatically attached to the instance so a fat arrow is not needed there (it would have been if it weren't a constructor).

class EventCtrl
    @$inject = ['$scope', '$http']

    constructor: (@$scope, @$http) ->
        @$http.get('/some/url/', config)
            .success (data) =>
                #set the events directive
                @events = data
            .error (data) ->
                console.log('error!')
share|improve this question

1 Answer

up vote 1 down vote accepted

You're supposed to attach it to scope, not @ (which might not even be your class instance, if .success changes the context. You can use coffeescript's fat arrow for that).

Also, what's the point of having an init method ? It's exactly the constructor's purpose.

share|improve this answer
 
Normally you would make it an instance attribute but it indeed seems that @ inside the http.get is not the class but the window. A solution is to explicitely set @ to the instance at the beginning of the method. Oh, and yes, you are indeed right that there is no need for the init(), it was a left-over because I stripped a lot of other code. –  Berco Beute Oct 23 at 8:29
 
As I said, you can just use CoffeeScript's => (fat arrow) to keep your this –  user1737909 Oct 23 at 8:53
 
You cannot use a fat arrow on a constructor (cannot define a constructor as a bound function), but using it on the success handler indeed solves the issue. Thanks! –  Berco Beute Oct 23 at 9:16
 
I meant to use it on the success handler, indeed. –  user1737909 Oct 23 at 11:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.