Передача данных в пользовательскую директиву в 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 ответа

Решение

Попробуйте изменить

scope: {
  url: '='
},

в

scope: {
  url: '@'
},

Смотрите здесь для очень простого примера. Проверьте консоль. Посмотрите здесь, какая разница между = а также @,

Когда вы указываете область действия: { 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
             }
        }
        });
Другие вопросы по тегам