Как получить информацию об элементе clicked элемента (из области действия) в заданной директиве AngularJS?

Question

Хорошо, позвольте мне описать мою оригинальную проблему, которая время от времени пробуждается. Рассмотрим следующую product.html страницу:

<div data-ng-controller="productsCtrl" data-ng-init="getProducts()" class="row-fluid"> 
    <div class="span12"> 
     <div data-ng-repeat="section in sections"> 
      <h2>{{section.name}}</h2> 
      <div class="products-container"> 
       <div data-ng-repeat="product in section.products"> 
        <img alt="{{product.name}}" class="product-img" data-zoomable-image="/path_to_large_img_or_empty_if_no_image_to_zoom" data-ng-src="/path_to_thumbnail_img"> 
        <div class="product"> 
         <!-- Product Info --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Контроллер productsCtrl, очевидно, отвечает, чтобы получить информацию о продукции, один из которых является эскиз/большое изображение URL продукта. Идея состоит в том, чтобы создать директиву, которая управляет элементом img на основе атрибута «data-zoomable» на данном изображении. Если значение атрибута пуст, нет изображения для отображения; В противном случае для отображения изображения должен быть открыт модальный блок.

До сих пор так хорошо. Итак, позвольте мне показать директиву zoomableImage:

app.directive('zoomableImage', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var zoomIn = element.wrap('<a href="#" class="zoom-in"></a>').click(function (e) { 
       var href = element.data('zoomableImage'); 

       var modal = $('#zoomInModal'); 

       //Here, I need to pass the "product's name" to the zoomInCtrl's scope. 
       //This can be done using the following 3 lines of code... 

       var s = modal.scope(); 
       s.product = 'The clicked element\'s name obtained from the DOM "element"'; 
       s.$apply(); 

       //I believe that those 3 above lines suck, since I'm not supposed to 
       //set the scope of another controller in a directive. Right? 

       modal.prependTo('body').modal('show'); 
       e.preventDefault(); 
      }); 

      $('<span class="label label-info">Zoom In</span>').insertAfter(zoomIn); 
     } 
    }; 
}); 

Итак, вопрос в том, что это правильный путь прохождения «щелкнул» продукта Имя, часть #, и URL изображения в диалоге я собираюсь открыть выше ? Обратите внимание, что ProductCtrl возвращает массив разделов, каждый раздел содержит несколько продуктов и т. Д. ...

Конечно, я могу поместить имя, часть # и другую связанную информацию в разные атрибуты данных элемента img, но я верю, что это дублирует информацию, которая уже присутствует в контроллере продуктов.

Спасибо.

Answer 1

Вы можете передать ссылку ваших объектов продукта (ов) к директиве, добавив в директиву:

scope: { 
    product: '=' 
} 

Объект затем разделяют между контроллером и вашей директивой экземпляра. Вы должны добавить атрибут в вашей HTML тоже:

<img data-product="product" data-zoomable-image="..." ... > 

EDIT: Модальные должен быть сервис. Оформить заказ angular-bootstrap modal.