web-dev-qa-db-ja.com

プログラムでngClickを起動する方法

実行時に要素のng-clickをトリガしたいのですが:

_ele.click();

OR

_ele.trigger('click', function());

どうすればこれができますか?

96
mulla.azzi

構文は次のとおりです。

function clickOnUpload() {
  $timeout(function() {
    angular.element('#myselector').triggerHandler('click');
  });
};

// Using Angular Extend
angular.extend($scope, {
  clickOnUpload: clickOnUpload
});

// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;

Angularについての詳しい情報---道を広げる ここ

triggerHandler の代わりに trigger を使用する場合は trigger を使用してください。

伝播停止を適用する必要がある場合は、この方法を次のように使用できます。

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
175
clopez
angular.element(domElement).triggerHandler('click');

編集:現在の$ apply()サイクルから抜け出す必要があるようです。これを行う1つの方法は、$ timeout()を使用することです。

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);

フィドルを参照してください。 http://jsfiddle.net/t34z7/

82
Blago

この解決法は私にはうまくいきます:

angular.element(document.querySelector('#myselector')).click();

の代わりに :

angular.element('#myselector').triggerHandler('click');
18
jpmottin

万が一それを見た場合に備えて、イベントの伝播を妨げないような重要な行を追加した重複する回答を追加しました

$scope.clickOnUpload = function ($event) {    
    $event.stopPropagation(); // <-- this is important

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
13
Ulterior

普通のJavaScriptを使用して私のために働いた:
document.querySelector('#elementName').click();

7
charlchad

あなたは好きなことができます

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
5
Fizer Khan

最善の解決策は、次のものを使用することです。

domElement.click()

Angularjs triggerHandler(angular.element(domElement).triggerHandler('click'))クリックイベントはDOM階層内では発生しませんが、上のものは発生します - 通常のマウスクリックのように.

https://docs.angularjs.org/api/ng/function/angular.element

http://api.jquery.com/triggerhandler/

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

4

簡単なサンプル:

HTML

<div id='player'>
    <div id="my-button" ng-click="someFuntion()">Someone</div>
</div>

JavaScript

$timeout(function() {
    angular.element('#my-button').triggerHandler('click');
}, 0);

これは、ボタンのidを探し、クリックアクションを実行します。出来上がり。

ソース: https://techiedan.com/angularjs-how-to-trigger-click/

1

クリックイベントをトリガーしたいメソッドに次の行を含める

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});
0

このコードは機能しません(クリックするとエラーをスローします)。

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});

次のようにquerySelectorを使用する必要があります。

$timeout(function() {
   angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
0