Question

我有一个AngularJS应用程序，其中一个控制器管理索引模板，显示从API调用接收的记录，第二个控制器管理相应的 show 模板用于记录。 / p>

我想在 show 模板上创建一个前进/后退按钮，这样您就可以直接浏览记录。如果我到达终点，我希望它在开始时重新启动 - 并且无限循环。

我不知道在哪里放置“记录总数”的逻辑，以便我的节目控制器知道我已经到了最后。只有我的索引控制器具有完整的数据集。似乎服务在使控制器说话时很有用，但我不确定如何在这种情况下实现它。

目前正在工厂发生的API调用：

app.factory('studentsFactory', ['$http', '$cacheFactory', function ($http, $cacheFactory) {

  var factory = {};

  factory.getStudents = function() {
    return $http.get('http://localhost:3000/students', { cache: true });   };

  factory.getStudent = function(studentId) {
    return $http.get('http://localhost:3000/students/' + studentId, { cache: true });   };

  return factory;

}]);

...并转交给IndexCtrl：

app.controller('IndexCtrl', ['$scope', 'studentsFactory', function ($scope, studentsFactory) {

  function init() {
    studentsFactory.getStudents()
      .success(function (students) {
        $scope.students = students;
        $scope.length = students.length
      });
    });
  }

  init();
}]);

...和ShowCtrl：

app.controller('ShowCtrl', ['$scope', 'studentsFactory', '$routeParams', function ($scope, studentsFactory, $routeParams){
  var studentId = $routeParams.studentId;
  // var nextId = studentId++  (if < max, go ahead, if not, reset to 1)

  function init() {
    studentsFactory.getStudent(studentId)
      .success(function (student) {
        $scope.student = student;
      });
  });

  init();
}]);

好像它就在我面前。工厂是否也可以将相同API调用的数据发送到可以将max存储为变量的服务？

非常感谢。

Answer 1

您可以在服务中放置一些next和previous方法，靠近学生数据本身。也许是这样的：

factory.nextStudent = function() {
  var deferred = $q.defer();
  rollIndexForward();
  this.getStudent(currentIndex).then(function(student) {
    deferred.resolve(student);
  });
  return deferred.promise;
};

factory.previousStudent = function() {
  var deferred = $q.defer();
  rollIndexBackward();
  this.getStudent(currentIndex).then(function(student) {
    deferred.resolve(student);
  });
  return deferred.promise;
};

然后，您可以将这些方法绑定到控制器中的next（）和previous（）方法，以设置当前学生。

$scope.next = function() {
  studentsFactory.nextStudent().then(function(student) { 
    $scope.currentStudent = student;
  });
};

$scope.previous = function() {
  studentsFactory.previousStudent().then(function(student) { 
    $scope.currentStudent = student;
  });
}

这可以让学生将逻辑收集在一起并实现重用。

这里有一名采访者：http://plnkr.co/edit/YPqfIDX8USeg0jv6nlGi?p=preview

创建＆＃34;下一条记录/以前的记录＆＃34; Angular中的按钮

1 个答案: