Inject Service into Directive AngularJS and data binding.

Question

I created a Service that obtain data with $http and this data is stored in a variable of this Service, also I created a Directive that use the service to create a tag select with options, these options were obtained in the service, but this is my problem the data obtained never connect with directive.

Service and Directive:

angular.module('myModule'[])
    .factory('myService', ['$http', function($http){
        var listOptions = [];
        $http({
            method: 'GET',
            url: 'urlToDataJson'
            }).then(function(resp){
                listOptions = resp.data
            })
        ;
        return {
            list: listOptions;
        }
   }]
   .directive('myDirective', ['myService', function(myService){
        restrict: 'E',
        template: '<select ng-options="item.id as item.name for item in list"></select>',
        replace: true,
        controller: ['$scope', function($scope)
           $scope.list = MyService.list;
        ]
   }])
;

with the Chrome's DevTool I can see data is updated after $http runs, but the data not shown in the options.

The code above is an example that I need to do.

frishi · Accepted Answer · 2016-02-14 04:15:41Z

1

Your $http call returns a promise object. Wrap the $http call in a function and return the promise object, then, in your directive, invoke this function and resolve the promise object and get the data.

Specifically,

getData(){
  return $http({
       method: 'GET',
       url: 'urlToDataJson'
       }).then(function(resp){
            listOptions = resp.data
   ); // this returns a promise
}

And then in your directive, resolve the promise like so:

MyService.getData().then(function(data){
   console.log(data); // <-- this is how you access the result of your $http call
});

answered Feb 14, 2016 at 4:15

frishi

8821 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rck6982 Over a year ago

I'll try to do that, but why works like that? I understand that there is an asynchronous call, but the result is assigned to a variable. Can you explain me a little bit?

frishi Over a year ago

You don't know when the http call will finish. If you were to do this without a promise, listOptions will be undefined, because of the asynchronous nature of JavaScript. Without a promise, you are trying to assign listOption's value BEFORE the http call had a chance to finish.

rck6982 Over a year ago

Now I have a doub, what's up when I use this directive into ng-repeat, there will be multiple request? or what's up when the data are updated in the server?. Thank You!

frishi Over a year ago

You can check the Network tab of your browser to see if it makes multiple requests. Typically, the directive's controller is instantiated for every occurrence of the directive on the page. So, if you have 4 instances of the directives on the page, there will be 4 corresponding controller instances and yes, 4 separate $http requests.

ojus kulkarni · Accepted Answer · 2016-02-14 07:07:41Z

0

You can do this also ,

return $q(function (resolve, reject) {

    $http({
        method: 'GET',
        url: 'urlToDataJson'
        }).then(function(resp){
            $scope.responseDate = resp.data;
            resolve(responseData);
        });
});

answered Feb 14, 2016 at 7:07

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

Inject Service into Directive AngularJS and data binding.

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related