Angular.js 和 coffeescript 中的未定义属性错误

Question

我正在尝试用coffeescript 编写一个好的angularjs。 但我收到了这个错误，甚至定义了“帖子”：

TypeError: Cannot read property 'post' of undefined

这里是代码：

'use strict'

class SupervisorEmployeeFactory

    @$inject = ['$http', 'myConfig', '$auth']

    constructor : (@$http, @myConfig, @$auth) ->
        return {
            getAllSupervisorEmployee: getAllSupervisorEmployee,
            getActiveSupervisorEmployee: getActiveSupervisorEmployee,
            getInactiveSupervisorEmployee: getInactiveSupervisorEmployee,
            getAbsentSupervisorEmployee: getAbsentSupervisorEmployee
        }


    getAllSupervisorEmployee = ->
        # Here is where the error happens in the 'post'. Probably in the other methods too.
        @$http.post @myConfig.url + '/someurl/' + @$auth.getToken()

    getActiveSupervisorEmployee = ->
        @$http.post @myConfig.url + '/anotherUrl/' + @$auth.getToken()

    getInactiveSupervisorEmployee = ->
        @$http.post @myConfig.url + '/otherSomeUrl/' + @$auth.getToken()

    getAbsentSupervisorEmployee = ->
        @$http.post @myConfig.url + '/otherOtherUrl/' + @$auth.getToken()



angular
.module 'heinz.dashboard'
.factory 'SupervisorEmployeeFactory', SupervisorEmployeeFactory

这是生成的 javascript 代码：

(function() {
  'use strict';
  var SupervisorEmployeeFactory;

  SupervisorEmployeeFactory = (function() {
    var getAbsentSupervisorEmployee, getActiveSupervisorEmployee, getAllSupervisorEmployee, getInactiveSupervisorEmployee;

    SupervisorEmployeeFactory.$inject = ['$http', 'myConfig', '$auth'];

    function SupervisorEmployeeFactory($http, myConfig, $auth) {
      this.$http = $http;
      this.myConfig = myConfig;
      this.$auth = $auth;
      return {
        getAllSupervisorEmployee: getAllSupervisorEmployee,
        getActiveSupervisorEmployee: getActiveSupervisorEmployee,
        getInactiveSupervisorEmployee: getInactiveSupervisorEmployee,
        getAbsentSupervisorEmployee: getAbsentSupervisorEmployee
      };
    }

    getAllSupervisorEmployee = function() {
      return this.$http.post(this.myConfig.url + '/someUrl/' + this.$auth.getToken());
    };

    getActiveSupervisorEmployee = function() {
      return this.$http.post(this.myConfig.url + '/anotherUrl/' + this.$auth.getToken());
    };

    getInactiveSupervisorEmployee = function() {
      return this.$http.post(this.myConfig.url + '/otherSomeUrl/' + this.$auth.getToken());
    };

    getAbsentSupervisorEmployee = function() {
      return this.$http.post(this.myConfig.url + '/otherOtherUrl/' + this.$auth.getToken());
    };

    return SupervisorEmployeeFactory;

  })();

  angular.module('heinz.dashboard').factory('SupervisorEmployeeFactory', SupervisorEmployeeFactory);

}).call(this);

你们能给我一些关于我做错了什么的想法吗？

Answer 1

您的代码的基本问题是 get 方法中的 this var 与 $http 在构造函数中分配给的 this 不同.

我根据guide blog post 重新生成了您的咖啡脚本，略有不同。我还创建了一个working plnker，以便您可以看到下面代码的编译版本。

angular.module 'heinz.dashboard'
.factory 'SupervisorEmployeeFactory', ['$http', 'myConfig', ($http, myConfig) ->
    new class SupervisorEmployeeFactory    
        constructor :  ->
            @title = 'my title'    

        getAllSupervisorEmployee: ->
            # Here is where the error happens in the 'post'. Probably in the other methods too.
            $http.post myConfig.url + '/someurl/' #+ $auth.getToken()

        getActiveSupervisorEmployee: ->
            $http.post myConfig.url + '/anotherUrl/' #+ @$auth.getToken()

        getInactiveSupervisorEmployee: ->
            $http.post myConfig.url + '/otherSomeUrl/' #+ @$auth.getToken()

        getAbsentSupervisorEmployee: ->
            $http.post myConfig.url + '/otherOtherUrl/' #+ @$auth.getToken()
]