AngularJS ng-table无法设置null的属性’$data’

我刚刚开始使用ng-table,我正试图通过茉莉花单元测试来测试它(不确定这是否是测试我的控制器的最佳方法)并且我一直遇到这个错误;

TypeError: Cannot set property '$data' of null
    at project/vendor/assets/javascripts/ng-table-0.3.1/ng-table.src.js:396:55
    at C (project/vendor/assets/javascripts/angular-min.js:92:375)
    at project/vendor/assets/javascripts/angular-min.js:94:28
    at h.$eval (project/vendor/assets/javascripts/angular-min.js:102:308)
    at h.$digest (project/vendor/assets/javascripts/angular-min.js:100:50)
    at h.$apply (project/vendor/assets/javascripts/angular-min.js:103:100)
    at f (project/vendor/assets/javascripts/angular-min.js:67:98)
    at handleResponse (project/vendor/assets/javascripts/angular-mocks.js:1160:9)
    at Function.$httpBackend.flush (project/vendor/assets/javascripts/angular-mocks.js:1491:26)
    at null.<anonymous> (project/spec/javascripts/unit/debtors_controller_spec.js.js:50:24)

这是我在控制器中设置ngTableParams的地方

# Setup ng-table with defaults and data
  $scope.tableParams = new ngTableParams({
    page: 1,count: 10,sorting: { code: 'asc'}
  },{
    # data is created by ngTableParams
    total: 0,# ng-table will ask for updated data,this is where it gets it from.
    getData: ($defer,params) ->
      # Go get a list of debtors
      Debtor.query {},(data) ->
        # Once successfully returned from the server with my data process it.
        params.total(data.length)

        # Filter
        filteredData = (if params.filter then $filter('filter')(data,params.filter()) else data)

        # Sort
        orderedData = (if params.sorting then $filter('orderBy')(filteredData,params.orderBy()) else data)

        # Paginate
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()))
  })

这是茉莉花测试

# ================================================================================
  # Delete tests
  # ================================================================================
  describe "destroy",->
    beforeEach(inject ( ($controller,$rootScope,$location,$state,$httpBackend) ->
      ctrl = $controller('DebtorsController',{
        $scope: @scope,$location: $location
      })
    ))

    it "gets new listing",->
      @scope.debtors = [{id: 1,name: "Good guys"},{id: 2,name: "John"}]
      @httpBackend.whenDELETE('/clients/1').respond(200)
      @httpBackend.whenGET('/debtors').respond(200,[{name: "John"}])
      @scope.destroy(1)
      @httpBackend.flush()
      expect(@scope.debtors[0].name).toEqual('John')

这是我的删除代码(有效)

# --------------------------------------------------------------------------------
  # Delete
  # --------------------------------------------------------------------------------
  $scope.destroy = (id) ->
    Client.delete
      id: id,(response) ->             # Success
      flash("notice","Client deleted",2000)
      $scope.tableParams.reload() # Reload ng-table data,which will get a new listing from the server.,(response) ->             # Failure

解决方法

你能在控制器中显示初始化ngTableParams的代码吗？

问题是ng-table使用ngTableController为ngTableParams设置$scope.由于您是单元测试,因此您没有ngTableController,因此ngTableParams的$scope将为null.您应该在单元测试中手动设置$scope of ngTableParams.尝试类似于这个JS的东西(真的不喜欢coffeescript,所以转换为你的需求)：

beforeEach(inject(function ($controller,$rootScope) {
            scope = $rootScope.$new();
            ctrl = $controller('DebtorsController',{
                $scope: scope,$location: $location
            });
            scope.tableParams.settings().$scope = scope;
        }));

假设您在控制器中有以下内容,您初始化ngTableParams：

$scope.tableParams = new ngTableParams({
    page: 1,// show first page
    count: 10           // count per page
},{
    total: data.length,// length of data
    getData: function($defer,params) {
        $defer.resolve(data.slice((params.page() - 1) * params.count(),params.page() * params.count()));
    }
});