Инициализиране на фабричния стил на услугата AngularJS

Имам услуга, която извлича данни чрез REST. Искам да съхраня получените данни в променлива за ниво на обслужване за използване в множество контролери. Когато поставя цялата REST логика директно в контролерите, всичко работи добре, но когато се опитам да преместя извличането/съхраняването на данни в услуга, контролерът не се актуализира, когато данните се върнат. Опитах много различни начини за поддържане на обвързването между услугата и контролера.

Контролер:

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>

angularjs angularjs-controller angularjs-service
person wisemanIV    schedule 28.10.2013    source източник
comment
вероятно защото вашата услуга ви връща обещание и трябва да използвате след това функция във вашия контролер? Вижте тук за повече подробности. johnmunsch.com/2013/07/17/angularjs-services-and -обещания   -  person javaCity    schedule 29.10.2013
comment
Предполагам, че това е въпросът. Как да свържа динамично контролер към услуга, когато услугата извлича данните си асинхронно? Също така искам да направя REST извикването само веднъж и да използвам локалното копие за сесията, след като бъде извлечено.   -  person wisemanIV    schedule 29.10.2013

Отговори (2)


arrow_upward
5
arrow_downward

Бих го написал с фабрика за обещания:

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;    
        }

     };
 }
]);

Страната на контролера

         SiteConfigService.getConfig()
                    .then(function (result) {
                       $scope.site = result;                           
                    }, function (result) {
                        alert("Error: No data returned");
                    });
person Maxim Shoustin    schedule 28.10.2013
comment
Нямам fiddle/plunker, но се надявам, че този пример може да ви помогне: jsfiddle.net/9Ymvt/674 - person Maxim Shoustin; 29.10.2013
comment
Имам това работещо. Трябваше да направя модификации на кода по-горе. Ще публикувам пълния отговор след известно време. - person wisemanIV; 29.10.2013

arrow_upward
2
arrow_downward

Решение въз основа на отговора на Максим по-горе - JsFiddle - 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");
                });
        }
    };
  }
);
person wisemanIV    schedule 28.10.2013