26

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

谢谢你的帮助。

4

4 回答 4

39

这可能是您实现这一目标的另一种方式。将索引和项目都传递给指令，并让指令在模板中设置 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

于 2013-04-22T19:14:20.483 回答
8

这更像是 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样式，直到实际数据加载之后。
于 2013-04-22T19:13:14.377 回答
2

这是对兰登的回答的扩展，对问题采取了直接的方法。如果您要在页面上拥有多个画廊，这可能是一种无需大惊小怪的方式。

用法：

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

看到它在这里工作

于 2013-04-22T19:50:35.403 回答
0

这就是我能够在页面加载时触发按钮单击的方式。

<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 Directive。

于 2016-11-30T15:59:52.147 回答