angularjs指示文からtriggerイベントclick

Question

angularjs指示文からインデックスを指定するli要素のclickイベントをどのようにトリガできますか？ 最初の要素のクリックをトリガするのに$ firstを使用しようとしましたが、機能しません。

ありがとうございました。

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 +')'}); 
     }); 
    } 
} 
}]); 

別の回答で指摘されているように、画像にクリックを追加する方がよいでしょう。

更新

デモのリンクが間違っていました。これは、問題へのディレクティブのアプローチとラングドンの答えを拡張したものですhttp://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Answer 2

これはそれを行うにはアンギュラ方法の詳細です：http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. 私はあなたの最初の問題（画像を不履行）を過ぎてあなたを取得$ scope.selectedItemを追加
2. 私は$ scope.setSelectedItemと呼ばを追加しましたそれはng-clickです。最終的な要件が異なることが、clickを結合して、そのほとんどは、テンプレートで初期ロード上の誤ったサーバー呼び出しを回避するためにngSrcの
3. お知らせの使用を扱うことができるのでsrcは、やり過ぎだっ変更するディレクティブを使用してもあなたがよ
4. いくつかのスタイルを調整して、画像をdiv内に正しく配置する必要があります。 background-imageを本当に使用する必要がある場合は、実際のデータがロードされるまでbackground-imageスタイルの設定を延期するngSrcのような指示が必要です。ここで

Answer 3

：それはに更新されました。あなたがページに複数のギャラリーを持っているなら、これはそれほど大騒ぎなしにそれについて行くための1つの方法かもしれません。

使用法：

<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のリピートからインデックスをとり、インデックス内の最初のボタンを呼び出し、ページのロード時、それをクリックして条件を使用して、簡単な指示。

これは、私が最初にプログラムで自動クリックをトリガーすることができた唯一の方法でした。angular.element(document.querySelector('#btn')).click();コントローラからは機能しませんでしたので、ページロード時にクリックを実行しようとしていて、インデックスを渡すことでどのボタンをクリックするかを指定することができます。私はこのスタックオーバフローの回答を別の投稿参照：https://stackoverflow.com/a/26495541/4684183 onLoadClickerディレクティブから得ました。