Передача данных в пользовательскую директиву в AngularJS
У меня есть страница, которая отображает кучу миниатюр изображений, которые получены с помощью http. Я использую ng-repeat, чтобы пройти через массив и сгенерировать HTML.
Это отлично работает.
Я также создаю пользовательскую директиву, которую я связываю как атрибут с элементами img, сгенерированными с помощью ng-repeat.
Это тоже отлично работает.
Тем не менее, когда я пытаюсь передать данные в область действия моей пользовательской директивы, все это рушится. Привязка данных не выполняется, ng-repeat не заменяет URL-адрес изображений, поэтому я получаю 404, поскольку URL-адрес недействителен. Это в значительной степени, насколько это возможно.
Любая помощь очень ценится, так как я совершенно новичок в Angular.
мой HTML шаблон:
<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>
и моя специальная директива:
myApp.directive('imageGallery',function(){
return {
restrict: 'A',
scope: {
url: '='
},
controller: function($scope){
console.log($scope.url);
}
}
});
3 ответа
Когда вы указываете область действия: { url:'=' }, вы указываете двустороннюю привязку модели. Атрибут, переданный как url, должен быть моделью, а не интерполированной строкой.
Попробуй это:
<img ng-src="gImg.thumbnailUrl" url="gImg.imageUrl" image-gallery>
В любом случае, почему вы пытаетесь изолировать область?
Попробуй это:
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
}
}
});