初始化AngularJS服務的工廠風格

我有一個通過REST檢索數據的服務。我想將結果數據存儲在服務級別變量中，以便在多個控制器中使用。當我將所有REST邏輯直接放入控制器時，一切正常，但當我嘗試將數據的檢索/存儲移動到服務中時，控制器在數據恢復時不會更新。我已經嘗試了很多不同的方式來維護服務和控制器之間的綁定。初始化AngularJS服務的工廠風格

控制器：

myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route', 'SiteConfigService', 
function ($scope, $rootScope, $route, SiteConfigService) { 

    $scope.init = function() { 
     console.log("SiteConfigCtrl init"); 
     $scope.site = SiteConfigService.getConfig(); 
    } 

} 

]);

服務：

myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', 
function ($http, $rootScope, $timeout, RESTService) { 

    var siteConfig = {} ; 

    RESTService.get("https://domain/incentiveconfig", function(data) { 
     siteConfig = data; 
    }); 

    return { 

     getConfig:function() { 
      console.debug("SiteConfigService getConfig:"); 
      console.debug(siteConfig); 

      return siteConfig; 
     } 

    }; 
} 
]);

查看：

<div class="span4" ng-controller="SiteConfigCtrl"> 
      <header> 
       <h2> 
        {{site.title}} 
       </h2> 
      </header>

來源

2013-10-28 wisemanIV

可能是因爲您的服務已返回你的承諾，你必須在你的控制器使用「那麼」功能？詳情請看這裏。 http://johnmunsch.com/2013/07/17/angularjs-services-and-promises/ – javaCity

我想這就是問題所在。當服務異步檢索其數據時，如何動態地將控制器綁定到服務？我也只想進行一次REST調用，並在檢索後使用會話的本地副本。 – wisemanIV

我會把它與廠家的承諾寫：

myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', '$q' 
function ($http, $rootScope, $timeout, RESTService, $q) { 

    var siteConfig = {} ; 

    RESTService.get("https://domain/incentiveconfig", function(data) { 
     siteConfig = data; 
    }); 

    // or just 
    // var siteConfig = RESTService.get("https://domain/incentiveconfig"); 

    return { 

     getConfig:function() { 
      var deferred = $q.defer(); 
      deferred.resolve(siteConfig); 

       return deferred.promise;  
     } 

    }; 
} 
]);

的jsfiddle - -

控制器側

  SiteConfigService.getConfig() 
        .then(function (result) { 
         $scope.site = result;       
        }, function (result) { 
         alert("Error: No data returned"); 
        });

來源

2013-10-28 22:17:06

我沒有小提琴/笨蛋，但希望這個例子可以幫助你：http://jsfiddle.net/9Ymvt/674/ –

我有這個工作。我不得不對上面的代碼進行修改。我會在一段時間後發佈完整答案。 – wisemanIV

基於Maxim的回答上述溶液http://jsfiddle.net/acb98sm/2pQ6A/6/

var myApp = angular.module('myApp',[]); 

myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route', 'SiteConfigService', 
function ($scope, $rootScope, $route, SiteConfigService) { 

    SiteConfigService.getConfig() 
      .then(function (result) { 
       console.log("results are in "); 
       console.log(result); 
       $scope.site = result.data; 

      }, function (result) { 
       alert("Error: No data returned"); 
      }); 

} 

]); 

myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', '$q', 
function ($http, $rootScope, $timeout, RESTService, $q) { 

var siteConfigFn = RESTService.get("http://graph.facebook.com/616366118/", function(data) { 
    console.log("SiteConfigService returns"); 
}); 

return { 

    getConfig:function() { 
     var deferred = $q.defer(); 
     deferred.resolve(siteConfigFn); 

      return deferred.promise;  
    } 

}; 
} 
]); 

myApp.$inject = ['$scope', 'SiteConfigService', 'RESTService']; 

myApp.factory('RESTService', 
function ($http) { 
    return { 
     get:function (url, callback) { 
      return $http.get(url, {withCredentials:false}). 
       success(function (data, status, headers, config) { 
        callback(data); 
       }). 
       error(function (data, status, headers, config) { 
        console.log("failed to retrieve data"); 
       }); 
     }, 
     post:function (url, data, callback) { 
      return $http.post(url, data, {withCredentials:true}). 
       success(function (data, status, headers, config) { 
        callback(data); 
       }). 
       error(function (data, status, headers, config) { 
        console.log("failed to retrieve data"); 
       }); 
     } 
    }; 
    } 
);

來源

2013-10-28 23:29:03 wisemanIV

初始化AngularJS服務的工廠風格

回答

相關問題