从angularjs指令触发点击事件(trigger click event from angula

我怎样才能触发li元素从angularjs指令指定其指数的点击事件？我一直在使用$第一触发点击第一个元素试过，但它不工作。

谢谢你的帮助。

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-点击图像。

更新

的链接，演示是不正确的。它已被更新为： http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Answer 2:

这更是对角的方式来做到这一点： 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>

看到它在这里工作

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指令。

文章来源: trigger click event from angularjs directive