带有HTTP请求数据的AngularJs指令

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.

Answer 1

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

Answer 2

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>

Answer 3

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.