web-dev-qa-db-ja.com

angularjsディレクティブからクリックイベントをトリガーします

Anglejsディレクティブからインデックスを指定してli要素のクリックイベントをトリガーするにはどうすればよいですか？最初の要素のクリックをトリガーするために$ firstを使用しようとしましたが、機能しません。

助けてくれてありがとう。

eventsangularjsclickangularjs-directive
26
ayimos

おそらくこれを実現するための別の方法があります。インデックスとアイテムの両方にディレクティブを渡し、ディレクティブにテンプレートの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

38
lucuma

これは、Angular方法： http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

  1. 最初の問題を解決する$ scope.selectedItemを追加しました（デフォルトの画像）
  2. $ scope.setSelectedItemを追加し、ng-clickで呼び出しました。最終的な要件は異なる場合がありますが、ディレクティブを使用してclickをバインドし、srcを変更すると、ほとんどがテンプレートで処理できるため過剰になります。
  3. ngSrc の使用に注意してください。これにより、初期ロード時の誤ったサーバー呼び出しが回避されます。
  4. 画像をdivに配置するには、いくつかのスタイルを調整する必要があります。 background-imageを本当に使用する必要がある場合は、実際のデータがロードされるまでbackground-imageスタイルの設定を延期するngSrcのようなディレクティブが必要です。
8
Langdon

これは、問題に対する指示的なアプローチを備えたラングドンの答えの拡張です。ページ上に複数のギャラリーがある場合、これは大した騒ぎなしでそれについて進むための一つの方法かもしれません。

使用法：

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

ここで動作することを確認してください

2
JayQuerie.com

これにより、ページが読み込まれたときにボタンクリックをトリガーできました。

_<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/468418 onLoadClicker Directive。

0
Ian Poston Framer