CoffeeScript class-based controller for AngularJS doesn't update template

Question

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!')

Ven · Accepted Answer · 2013-10-23 08:03:45Z

2

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.

answered Oct 23, 2013 at 8:03

Ven

19k2 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Berco Beute Over a year ago

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.

Ven Over a year ago

As I said, you can just use CoffeeScript's => (fat arrow) to keep your this

Berco Beute Over a year ago

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!

Ven Over a year ago

I meant to use it on the success handler, indeed.

Collectives™ on Stack Overflow

CoffeeScript class-based controller for AngularJS doesn't update template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related