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

Вот, возможно, другой способ добиться этого. Передайте в директиву как индекс, так и элемент, и пусть директива настроит 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

Это больше способ сделать это в Angular: 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 до тех пор, пока не будут загружены реальные данные.

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

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

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

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

Вот как я смог вызвать нажатие кнопки при загрузке страницы.

<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(); Не работает из контроллера, поэтому создание этой простой директивы кажется наиболее эффективным, если вы пытаетесь выполнить щелчок при загрузке страницы, и вы можете указать, какую кнопку щелкнуть, передав index. Мне помог этот ответ о переполнении стека из другой ссылки на сообщение: https://stackoverflow.com/a/26495541/4684183 Директива onLoadClicker.