Passing data to a custom directive in AngularJS

Question

I have a page that displays a bunch of thumbnails of images that are retrieved using http. I use ng-repeat to go through the array and generate the html.
This works fine.

I also create a custom directive that I tie as an attribute to img elements generated by ng-repeat.
This also works fine.

However, when I try to pass data to the scope of my custom directive then it all falls apart. Data binding fails, ng-repeat does not replace the url of the images so I end up getting a 404 since the url is invalid. That is pretty much as far as it goes.

Any help is greatly appreciated since I am completely new to Angular.

my html template:

<div class="portfolioContent">
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 col-padding" ng-repeat="gImg in gPhotos">
        <div class="photoframe">
                <img src="{{gImg.thumbnailUrl}}" url="{{gImg.imageUrl}}" image-gallery>
        </div>
    </div>

and my custom directive:

myApp.directive('imageGallery',function(){

return {
    restrict: 'A',
    scope: {
      url: '='
    },
    controller: function($scope){
        console.log($scope.url);
    }
}

});

Community · Accepted Answer · 2017-05-23 12:14:47Z

5

Try changing

scope: {
  url: '='
},

to

scope: {
  url: '@'
},

See here for a very simple example. Check the console. See here what the difference is between = and @.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 23, 2014 at 3:23

Jorg

7,2704 gold badges48 silver badges68 bronze badges

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

Comments

Michael Kang · Accepted Answer · 2014-06-23 03:29:32Z

3

When you specify scope: { url:'=' }, you are specifying two-way model binding. The attribute passed as 'url' should be a model, not an interpolated string.

Try this:

<img ng-src="gImg.thumbnailUrl" url="gImg.imageUrl" image-gallery>

answered Jun 23, 2014 at 3:29

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

2 Comments

Quantum_Entanglement Over a year ago

Your answer was also useful in helping me understand the the two way binding relationship, however since I don't want/need to update the value of gImg.thumbnailUrl in my directive this won't work. After Angular compiles this I end up with: <img ng-src="gImg.thumbnailUrl" url="gImg.imageUrl" image-gallery="" class="ng-isolate-scope" src="gImg.thumbnailUrl">

Michael Kang Over a year ago

Since it is bound to a model, it should work. Likely, there is something else going on. But if attribute binding works, that's good to hear.

Mr. AK · Accepted Answer · 2020-11-11 11:03:22Z

1

Why are you trying to isolate scope anyway ?

Try this :

        myApp.directive('imageGallery',function(){
        return {
            restrict: 'A',
            link : function(scope, element, attributes){
                   console.log(attributes.url);
                  // will log your URL as an attribute
                  // here you can bind an even to do your job , E.g. : click , mouseover
             }
        }
        });

edited Nov 11, 2020 at 11:03

Mr. AK

8911 bronze badges

answered Jun 23, 2014 at 4:41

Milad

28.8k11 gold badges78 silver badges91 bronze badges

Collectives™ on Stack Overflow

Passing data to a custom directive in AngularJS

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related