angular directive handles http request

Question

I have angular directive that accept url to obtain remote data:

<my-tag src="http://127.0.0.1/srv1">...

Directive itself:

app.directive('myTag', ['$http', function($http) {
return {
    restrict: 'E',
    transclude: true,
    replace: true,  
    //template: '<div ng-repeat="imgres in gallery">{{imgres.isUrl}}\'/></div>',
    scope:{
        src:"@",            //source AJAX url to dir pictures
    },
    controller:function($scope){
        console.info("enter directive controller");
        $scope.gallery = [];
        $http.get($scope.src).success(function(data){
           console.info("got data");
           $scope.gallery.length = 0;
           $scope.gallery = data;
        });
    }
}

In general it works and I can see in FireBug console:

enter directive controller
GET http://127.0.0.1/srv1
got data

But If I'm placing second instance of directive bind to another url:

<my-tag src="http://127.0.0.1/srv2">...

Works only one with following log:

enter directive controller
GET http://127.0.0.1/srv1
enter directive controller
GET http://127.0.0.1/srv2
got data             <-- as usual it relates to first directive

Couldn't you help me what is wrong with 2 directive nstances

I created JSFiddle any everything seems to work just fine.

PrimosK
– PrimosK

2014-03-03 08:58:12 +00:00
Commented Mar 3, 2014 at 8:58 — PrimosK
– PrimosK, Commented Mar 3, 2014 at 8:58

Maxim Shoustin · Accepted Answer · 2014-03-03 08:57:54Z

22

First of all I don't see any problem. You use directive several times therefore isolate scope is right way.

I just changed src:"@" to src:"=".

Demo Fiddle

HTML

<div ng-controller = "fessCntrl"> 
    <my-tag src="'http://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, 153 Bukit Batok Street 1&sensor=true'"></my-tag>

    <my-tag src="'http://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, 3 Bukit Batok Street 1&sensor=true'"></my-tag>        
</div>

JS

app.directive('myTag', ['$http', function($http) {
return {
    restrict: 'E',
    transclude: true,
    replace: true,     
    scope:{
        src:"="       
    },
    controller:function($scope){
        console.info("enter directive controller");
        $scope.gallery = [];

    console.log($scope.src);

        $http({method: 'GET', url:$scope.src}).then(function (result) {
                           console.log(result);                              
                        }, function (result) {
                            alert("Error: No data returned");
                        });
    }
}
}]);

answered Mar 3, 2014 at 8:57

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

1 Comment

Dewfy Over a year ago

Thank you a lot, you regain confidence in my skills, Hopefully it was side-effect of firebug!

Collectives™ on Stack Overflow

angular directive handles http request

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related