Событие щелчка триггера из директивы angularjs

Ответ 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>

js:

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 к изображению, как указано в другом ответе.

Обновление

Ссылка на демонстрацию была неверной. Он обновлен до: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Ответ 2

Это больше подходит для Angular: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

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

Ответ 3

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

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

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

Посмотрите, как он работает здесь

Ответ 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>

Простая директива, которая берет индекс из ng-repeat и использует условие, чтобы вызвать первую кнопку в индексе и щелкнуть по ней при загрузке страницы.

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(); Не работает с контроллера, поэтому эта простая директива кажется наиболее эффективной, если вы пытаетесь запустить щелчок на загрузке страницы, и вы можете указать, какую кнопку нажать, пройдя в индексе. Я получил помощь через этот ответ из другой ссылки: fooobar.com/info/227162/... директива onLoadClicker.