AngularJS फैक्टरी http खाली

Question

मैं पहली बार AngularJS की कोशिश कर रहा हूं। मुझे एक कारखाने का उपयोग कर http-get अनुरोध से जेएसओएन डेटा मिल रहा है, लेकिन अजाक्स-अनुरोध करने से पहले ऑब्जेक्ट खाली हो गया है।

फैक्टरी:

myDemo.factory('photosFactory', function($http) { 
    var photos = []; 

    var factory = {}; 

    factory.getPhotos = function() { 
     $http({ 
      url: 'content/test_data.json', 
      method: 'GET' 
     }).success(function(data, status, headers, config) { 
      photos = data; 
      return photos; 
     }); 
    }; 
    return factory; 
}); 

नियंत्रक:

controllers.AppCtrl = function($scope, $location, $http, photosFactory) { 
    $scope.photos = []; 
    init(); 
    function init() { 
     $scope.photos = photosFactory.getPhotos(); 
    } 
}; 

यह है कि मैं क्या लेकर आए हैं है। जब नियंत्रक $ scope.photos सेट करता है, तो मान खाली होता है जैसे कि यह AJAX प्रतिक्रिया के साथ पॉप्युलेट होने से पहले फ़ोटो सरणी देता है।

Answer 1

आप एक वादा लौट सकते हैं और नियंत्रक कृपया में मान का उपयोग करने के लिए अपने कोड को संशोधित करना चाहिए देखने के डमी संशोधित कोड

myDemo.factory('photosFactory', function($http) { 
return{ 
    getPhotos : function() { 
     return $http({ 
      url: 'content/test_data.json', 
      method: 'GET' 
     }) 
    } 
} 
}); 

और नियंत्रक -

controllers.AppCtrl = function($scope, $location, $http, photosFactory) { 
    $scope.photos = []; 
    photosFactory.getPhotos().success(function(data){ 
     $scope.photos=data; 
    }); 
}; 

Answer 2

$resource का उपयोग करके आप आप क्या हासिल करने देगा चाहते हैं, और $http

(शामिल करना न भूलें) की तुलना में आपको अधिक नियंत्रण प्रदान करें ।अपने ऐप के लिए निर्भरता के रूप में)

myDemo.factory('photosFactory', function($resource) { 
    var factory = {}; 

    factory.getPhotos = $resource('content/test_data.json', {}, { 
     'query': {method: 'GET', isArray: true} 
    }); 
    return factory; 
}); 

controllers.AppCtrl = function($scope, $location, $http, photosFactory) { 
    $scope.photos = []; 
    init(); 
    function init() { 
     $scope.photos = photosFactory.getPhotos.query(); 
    } 
}; 

Answer 3

क्ष वादा पुस्तकालय उपयोग करने का अर्थ अपनी सफलता समारोह आपकी सेवा में रह सकते हैं:

app.factory('Data', function ($http, $q) { 
    return { 
     ajaxItems: function() { 
      var deferred = $q.defer(); 
      $http({ method: "POST", url: "/Home/GetSearchResults" }) 
       .success(function (data, status, headers, config) { 
        deferred.resolve(data); 
       }).error(function (data, status, headers, config) { 
        deferred.reject(status); 
       }); 
      return deferred.promise; 
     } 
    } 
}); 

app.controller('ResultsCtrl', ['$scope', 'Data', function ($scope, Data) { 
    $scope.get = function() { 
     $scope.items = Data.ajaxItems(); 
     //the model returns a promise and THEN items 
     $scope.items.then(function (items) { 
      $scope.items = items; 
     }, function (status) { 
      console.log(status); 
     }); 
    }; 
}]);