Question

我在控制器中有这个代码：

.factory('TaskLinks', function($resource) {
  var task_links = $resource('http://127.0.0.1:3000/api/v1/task_links', {},
    {query:
      {
        cache: true,
        method: 'GET',
        isArray: true
      }
    });
  return task_links;
})

.factory('Timesheets', function($resource, TaskLinks) {
  var Timesheet = $resource('http://127.0.0.1:3000/api/v1/timesheets');
  angular.extend(Timesheet.prototype, {
    project: function() {
      return TaskLinks[this.task_id].project_name
    }
  });
  return Timesheet;
})

我的目标是缓存所有任务链接并扩展时间表，以便在模板中执行此操作{{timesheet.project（）}}。然而，它不起作用。它不会为项目返回任何内容。我收到了这个错误：

TypeError: Cannot read property 'project' of undefined

我没有看到对服务器的调用（即使我尝试将缓存设置为false）。也许这与承诺有关？（我对Angular很新，所以考虑到这段代码可能存在一些系列问题： - ）

编辑：控制器代码：

.controller('TimesheetCtrl', function($scope, TimeDate) {
    $scope.$TimeDate = TimeDate;
  })

这会调用TimeDate（它具有转到下一个和上一个日期并重新加载时间表的功能，我现在省略了它）：

.factory('TimeDate', function(Timesheets) {
  var currentDate = new Date();

  var timesheets = Timesheets.query({q: {time_start_gteq: currentDate, time_start_lt: moment(currentDate).add(1, 'd').toDate() }});

  return {
    currentDate: function() {
      return currentDate;
    },
    timesheets: function () {
      return timesheets
    }
  }
  })

模板是这样的：

        <ion-item ng-repeat="timesheet in $TimeDate.timesheets()">
            <h2>{{timesheet.project() }}</h2>
            <p>{{timesheet.notes}}</p>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>

EDIT2：

我改变了服务器的这一部分，现在当我调试时，我看到了返回的实际值。但是：查询似乎被调用了很多次，并且在视图中没有任何东西被显示为项目ID。

.factory('Timesheets', function($resource, $filter, TaskLinks) {
  var Timesheet = $resource('http://127.0.0.1:3000/api/v1/timesheets');
  angular.extend(Timesheet.prototype, {
    project: function() {
      var that = this;
      return $filter('filter')(TaskLinks.query().$promise, {id: that.task_link_id})[0].project_id;
      TaskLinks.query().$promise.then(function(response){
        var project = $filter('filter')(response, {id: that.task_link_id})[0].project_id;
        return project;
      });
    }
  });
  return Timesheet;
})

Answer 1

看起来$TimeDate.timesheets()是一个承诺对象，而不是请求的响应，你需要正确处理它，就像这样：

.controller('TimesheetCtrl', function($scope, TimeDate) {
    TimeDate.timesheets().$promise.then(function(response){
        //response <- actual response from server
        $scope.timesheets = response;
    });
  })

HTML：

  <ion-item ng-repeat="timesheet in timesheets">
      <h2>{{timesheet.project() }}</h2>
      <p>{{timesheet.notes}}</p>
      <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>

但我建议使用resolve中的$routeProvider将数据加载到控制器中，在这种情况下，所有数据都已经存在于控制器中，因此视图看起来会更好。

缓存模型并扩展另一个模型以使用它查找值

1 个答案: