AngularJS服务单例

AngularJS Service Singleton?

本文关键字:单例 服务 AngularJS      更新时间:2023-09-26

我对angularJS相当陌生,但我读到过服务应该是单例的。然而,这行不通。这是我的服务:

 .factory('TrainingPlan', function($http, SERVER){
   var o = {
     exercises: [],
     planID : 0
   };
   o.init = function(){
     if(o.exercises.length == 0)
      return o.getAllExercises();
   };
   o.getAllExercises = function(){
     $http({
       method: 'GET',
       url: SERVER.url + 'listener.php?request=getAllExercises&planID=' + o.planID
     }).then(function(data){
       o.exercises = angular.copy(o.exercises.concat(data.data));
       console.log("Exercises in Trainingplan Services");
       console.log(o.exercises);
       return o.exercises;
     })
     ;
   };
   o.getExercise = function(exerciseID){
     for(var i = 0; i < o.exercises.length; i++){
       if(o.exercises[i].exerciseID == exerciseID)
       {
         return o.exercises[i];
       }
     }
   };
  return o;
 })

我有两个控制器:

  .controller('TrainingDetailCtrl', function($scope, $stateParams, TrainingPlan, $timeout) {
   TrainingPlan.init();
    $timeout(function(){
      $scope.exercises = TrainingPlan.exercises;
      $scope.numberOfUnfishedExercises = $scope.exercises.length;
      button.innerHTML = "asdf";
    }, 250);
  })

(我没有复制整个控制器,但它的工作到目前为止…)

  .controller('TrainingHistoryEditCtrl', function($scope, $stateParams, TrainingPlan, $timeout) {
    var exerciseID = $stateParams.exerciseID;

    $scope.currentExercise = TrainingPlan.getExercise(exerciseID);
    console.log($scope.currentExercise);
  })

所以实际上我从TrainingDetailCtrl找到'TrainingPlan'的所有练习。但是,当我更改站点时,当我想在TrainingHistoryEditCtrl中使用它们时,TrainingPlan不再有练习了。

这是因为您的$http发出异步调用。即使调用init,实际上当代码运行到$timeout(function(){..行时,结果可能还没有到达。

请查看这个演示:JSFiddle。等待10秒后,该值不为空。

解决方法:从工厂返回promise。在控制器内部使用then来传递回调函数