trigger click event from angularjs directive

Question

Как я могу вызвать событие click для элементов li, определяющих их индекс из директивы angularjs? Я попытался использовать $ first для запуска щелчка для первого элемента, но его не работает.

Спасибо за любую помощь.

Answer 1

Возможно, для вас это может быть другим способом. Прохожу в директиве как индекс и пункт, и пусть дИРЕКТИВЫ настройки по HTML в шаблоне:

Демы: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

HTML:

<ul id="thumbnails"> 
    <li class="thumbnail" ng-repeat="item in items" options='#my-container' itemdata='item' index="$index"> 

    </li> 
    </ul> 

расслоения плотной директива:

app.directive('thumbnail', [function() { 
    return { 
    restrict: 'CA', 
    replace: false, 
    transclude: false, 
    scope: { 
     index: '=index', 
     item: '=itemdata' 
    }, 
    template: '<a href="#"><img src="{{item.src}}" alt="{{item.alt}}" /></a>', 
    link: function(scope, elem, attrs) { 
     if (parseInt(scope.index) == 0) { 
      angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'}); 
     } 

     elem.bind('click', function() { 
      var src = elem.find('img').attr('src'); 

      // call your SmoothZoom here 
      angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'}); 
     }); 
    } 
} 
}]); 

Возможно, вам было бы лучше добавить ng-click к изображению, как указано в другом ответе.

Update

Ссылка на демо неверен. Он обновлен по адресу: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Answer 2

Это больше Угловой способ сделать это: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. Я добавил $ scope.selectedItem, который получает мимо вашей первой проблемы (неплатежеспособного изображения)
2. Я добавил $ scope.setSelectedItem и называется это в ng-click. Ваши конечные требования могут быть разными, но с использованием директивы для связывания click и изменений src был излишним, так как большинство из них может быть обработано с шаблоном
3. Примечанием использование ngSrc, чтобы избежать странствующих вызовов сервера на начальной загрузке
4. Вы будете необходимо настроить некоторые стили, чтобы получить изображение, расположенное прямо в div. Если вам действительно нужно использовать background-image, вам понадобится директива типа ngSrc, которая отменит настройку стиля background-image до тех пор, пока не загрузятся реальные данные.

Answer 3

Это расширение ответа Лэнгдона с директивным подходом к проблеме. Если у вас будет несколько галерей на странице, это может быть одним из способов обойти это без особых проблем.

Использование:

<gallery images="items"></gallery> 
<gallery images="cats"></gallery> 

See it working here

Answer 4

Это, как я был в состоянии вызвать нажатие кнопки при загрузке страницы.

<li ng-repeat="a in array"> 
    <a class="button" id="btn" ng-click="function(a)" index="$index" on-load-clicker> 
    {{a.name}} 
    </a> 
</li> 

Простая директива, которая принимает индекс от нг-повтора и использует условие для вызова первой кнопки в индексе и нажмите на нее при загрузке страницы.

angular 
    .module("myApp") 
     .directive('onLoadClicker', function ($timeout) { 
      return { 
       restrict: 'A', 
       scope: { 
        index: '=index' 
       }, 
       link: function($scope, iElm) { 
        if ($scope.index == 0) { 
         $timeout(function() { 

          iElm.triggerHandler('click'); 

         }, 0); 
        } 
       } 
      }; 
     }); 

Это был единственный способ, с помощью которого я мог автоматически запускать автоматический клик в первую очередь.angular.element(document.querySelector('#btn')).click(); Не работает с контроллера, поэтому эта простая директива кажется наиболее эффективной, если вы пытаетесь запустить щелчок на загрузке страницы, и вы можете указать, какую кнопку нажать, пройдя в индексе. Я получил помощь через этот ответ переполнения стека из другой ссылки: https://stackoverflow.com/a/26495541/4684183 Директива onLoadClicker.