Passing data to a custom directive in AngularJS

问题:

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);     } }

});

回答1:

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 @.

回答2:

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>

回答3:

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 atribute                   // here you can bind an even to do your job , Eg : click , mouseover              }         }         });

转载请标明出处:Passing data to a custom directive in AngularJS

文章来源: Passing data to a custom directive in AngularJS