Passing data to a custom directive in AngularJS
Solution 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 @
.
Solution 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>
Solution 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 attribute
// here you can bind an even to do your job , E.g. : click , mouseover
}
}
});
Quantum_Entanglement
Updated on June 30, 2022Comments
-
Quantum_Entanglement about 2 years
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); } }
});