CODEWITHSUNDEEP
angularjs
Naresh
Naresh

Reputation: 115

AngularJS loading Directives before completing Service http call

I try to get the data from via http call from a service, and, assign return data from the service to the controller’s variable $scope. fusionJsonObj and finally pass this data to the Directive to make it available under directives scope for further processing.

Issue :

Before http call fetches data and assign it to the controllers $scope.fusionJsonObj, it went ahead and loaded Directive (at this point directive does not have data associated with $scope.fusionJsonObj as promise on the service did not return data from the server http call.

In short, please help me loading service http and promise where it assign http data to the controllers $scope.fusionJsonObj before loading Directive

Plunker link: http://plnkr.co/edit/xGchsnw2u9LremFATfvY?p=preview

Controller as follows:

 angular.module('FundooDirectiveTutorial', [])
      .controller('FundooCtrl', function($scope, readFusionTblService, $window) {
          $scope.rating = 3; //total no of the column
        $scope.listItemIndex=2; //no of column-1    
        alert('## in the Controller - and calling service method on http call');

        var promise = readFusionTblService.getFusionData(); 
        alert('## in the Controller - and calling promise');

        promise.then(
                    function(dataReturn){
                        alert('## in the Controller -  with promise execution');    
                        $scope.fusionJsonObj = dataReturn;

service as follows:

  .service('readFusionTblService', function($http, $q){



        alert("### in the Service ");

        this.getFusionData = function(){
                            var deferred = $q.defer();
                            var urlQuery = "https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%201n-NpyEkVKBOLSn_yE2LPL5Tk9K79saDkpKCrF00%20WHERE%20country='Sweden'%20AND%20type='glass'%20ORDER%20BY%20ST_DISTANCE(ComputedAddress,LATLNG(42,-83))%20LIMIT%2025&key=AIzaSyBqKyD7u_2CwBMQ3c9qAeMDTJaQIjYlgJo";

                            alert("### in the Service - before http call");                         
                            $http.get(urlQuery).success(function(data, status) {
                                    alert("### in the Service - After http call ####");                                 
                                    deferred.resolve(data);
                                }).error(function(data, status) {
                                    deferred.reject(data);
                                });                             
                            return deferred.promise;
        }

Upvotes: 0

Views: 1947

Answers (1)

Tasnim Reza
Tasnim Reza

Reputation: 6060

Some of your directive functionality depends on promise. promise.then always return another promise. Keep the new promise and pass to the directive like

var newPromise =  promise.then(...);
$scope.ratingConfig = {
    myPromise: newPromise
};

In HTML pass the promise to the directive like

<div fundoo-rating rating-config="ratingConfig" row-item-index="listItemIndex" rating-value="rating" on-rating-selected="saveRatingToServer(rating, ratingTextVal)" item-data="billTblModel" ></div>

In directive wrap the promise depended functionality like

scope.ratingConfig.myPromise.then(function() {/*promise depended code*/});

Check the updated plunker

Upvotes: 0

Related Questions