AngularJs directive with HTTP request data

Question

I'm relatively new to AngularJs, I have a problem using a custom directive when data comes from an HTTP request.

I have a service with an HTTP get request.

app.service('someService', function($http, $q){

    this.getData = function(){

        var deferred = $q.defer();
        $http({
            method: 'GET',
            url: 'theUrl'
        })
        .success(function(data, status){
            deferred.resolve(data);
        })
        .error(function(data, status){
            deferred.reject;
        })

        return deferred.promise;
    }

})

and a controller that calls the service.

app.controller('someConroller', function($scope, someService){

    someService.getData().then(function(response){

        $scope.data = response;
    })

    $scope.someArrayData = [
                 {.....}, {.....}, ...
             ]
}

Here is a very simple custom directive.

app.directive('customDirective', function(){

    return {

        link: function(scope, element, attrs){

            console.log(scope[attrs['customDirective']]);
        }
    }
})

The problem is when I get an instance of the directive using someArrayData it works fine. But when I get an instance of the directive using data (the data that I get from the http service) console.log(data) gives me undefined.

<div custom-directive="someArrayData"></div><!-- console.log(scope[attrs['customDirective']]) gives the expected result -->

<div custom-directive="data"></div><!-- console.log(scope[attrs['customDirective']]) undefined -->

Thanks for helping.

Does the HTTP response contain the data you expect in the format you expect? — The Head Rush
– The Head Rush, Commented Sep 29, 2015 at 15:36

scniro · Accepted Answer · 2015-09-29 16:04:01Z

4

You'll need a $watch to "listen" for that new value inside your directive once resolved by your service. There are various ways to do this, but this will be the most straightforward for understanding the concept. Also, you can likely clean this up a bit if you bind your value to that directives scope - essentially your call to scope[attrs[... can be streamlined. Observe the following...

angular.module('app', [])
.controller('ctrl', function($scope, $timeout) {

    // -- simulate ajax call
    $timeout(function() {
        $scope.data = ['A', 'B', 'C'];
    }, 500)
})
.directive('customDirective', function() {
    return {
        scope: {
            data: '=customDirective'
        },
        link: function(scope, elem, attrs) {

            scope.$watch('data', function(newVal, oldValue) {
                console.log(newVal) // -- or console.log(scope.data)
            });
        }
    }
});

JSFiddle Link - demo

edited Sep 29, 2015 at 16:04

answered Sep 29, 2015 at 15:44

scniro

17k8 gold badges67 silver badges108 bronze badges

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

2 Comments

Bilal BBB Over a year ago

Thanks for answering, your solution should work, but it doesn't I don't know why. The solution proposed by @Mohamed ElSaqqa works.

scniro Over a year ago

remember to make the correct scope declaration with the =

melsaqqa · Accepted Answer · 2015-09-29 15:44:29Z

3

That's because the data is not yet retrieved when the directive is linked. You can simply wrap the html element with ng-if:

<div ng-if="data">    
<div custom-directive="data"></div>
</div>

answered Sep 29, 2015 at 15:44

melsaqqa

1941 silver badge5 bronze badges

2 Comments

Bilal BBB Over a year ago

Thanks for your answer, it works fine, I don't understand why a watcher like proposed by @scniro doesn't work.

melsaqqa Over a year ago

Solution by @BillBilal works just fine. His solution is based on watching the value attached to the directive scope and whenever it is changed you can fire whatever logic you want.

inorganik · Accepted Answer · 2015-09-29 16:40:46Z

-1

The controller and the directive have different scopes, so when you assign $scope.data in your controller, you aren't doing it for your directive. So you should inject your service in your directive and request the data there.

If you are having trouble understanding scope heirarchies, read up on them in the Angular documentation for scope.

I would suggest downloading the Angular JS Batarang extension for Chrome - it allows you to inspect all the different scopes on your page.

edited Sep 29, 2015 at 16:40

answered Sep 29, 2015 at 15:37

inorganik

25.7k18 gold badges96 silver badges126 bronze badges

13 Comments

Bilal BBB Over a year ago

But {{data}} in the view binds the data.

inorganik Over a year ago

That's because the view is bound to the controller - but the directive has a separate child scope. Try it!

Bilal BBB Over a year ago

I'll try it, but doing so, the custom directive will depend on the service and not on the data injected from the view. It is not reusable.

inorganik Over a year ago

You are right, it's not re-usable. You might consider changing your design. If you want to use data from your controller, why did you make a separate directive? Also, check my edit about Batarang. Very helpful.

Bilal BBB Over a year ago

It's not the entire directive. I simplify it to show what is exactly my problem.

|

Collectives™ on Stack Overflow

AngularJs directive with HTTP request data

3 Answers 3

2 Comments

2 Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related