1

使用带有 CoffeeScript 的 AngularJS 1.1.5 我正在尝试使用新的“Controller as ...”语法，如下所示：

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)

使用以下 HTML 片段：

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

除了@events 中的更改不会更新（中的绑定点）模板之外，这一切正常。success处理程序中传入的“数据”@$http.get看起来不错。

这段代码一直在使用带有常规非类控制器的以前版本的 AngularJS。

更新 一个（丑陋的）解决方案是在方法中将this( @) 显式设置为本地值（thiz在下面的示例中）。不是很优雅，但它有效。

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

解决方案 使用粗箭头作为success处理程序。构造函数会自动附加到实例，因此那里不需要粗箭头（如果它不是构造函数，它本来会是这样）。

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

1 回答 1

2

您应该将它附加到scope，而不是@（如果更改上下文，它甚至可能不是您的类实例.success。您可以使用咖啡脚本的胖箭头）。

另外，有一个init方法有什么意义？这正是构造函数的目的。

于 2013-10-23T08:03:45.080 回答