Question

如何触发从angularjs指令指定索引的li元素的click事件？我已经尝试使用$ first来触发第一个元素的click，但它不起作用。

感谢您的帮助。

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>

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

Answer 2

这更像是Angular的做法：http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

我添加了$ scope.selectedItem，让你超越你的第一个问题（默认图像）
我添加了$ scope.setSelectedItem并在ng-click中调用了它。您的最终要求可能会有所不同，但使用指令绑定click并更改src是过度的，因为大部分内容都可以使用模板处理
请注意使用ngSrc以避免在初始加载时出现错误的服务器调用
您需要调整一些样式才能使图像位于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>

一个简单的指令，它从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(); 无法从控制器工作，因此如果您尝试在页面加载上运行单击并且可以通过传入索引来指定要单击的按钮，那么使这个简单的指令看起来最有效。我通过另一个帖子参考：https://stackoverflow.com/a/26495541/4684183 onLoadClicker指令获得了这个堆栈溢出答案的帮助。

从angularjs指令触发click事件

4 个答案: