Cara memicu ngClick secara terprogram

101

Saya ingin memicu ng-clickelemen saat runtime seperti:

_ele.click();

ATAU

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

Bagaimana ini bisa dilakukan?

— mulla.azzi
sumber

4

Tidak, saya ingin mengetahui mekanisme bagaimana saya dapat memicu ng-click secara manual.

— mulla.azzi

182

Sintaksnya adalah sebagai berikut:

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

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

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

Info lebih lanjut tentang Angular Extend caranya di sini .

Jika Anda menggunakan angular versi lama , Anda harus menggunakan trigger, bukan triggerHandler .

Jika Anda perlu menerapkan propagasi berhenti, Anda dapat menggunakan metode ini sebagai berikut:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>

— clopez.dll
sumber

4

versi sudut apa yang Anda gunakan. triggerHandler tampaknya berfungsi dengan baik di 1.2.1: jsfiddle.net/t34z7

— Blago

13

tolong jelaskan mengapa $ (elem) .click () tidak bekerja dengan Angular?

— Sergii Shevchyk

11

Jika Anda terbatas pada jqLite dan tidak dapat menggunakan selektor, lakukan ini sebagai gantinya: angular.element (document.querySelector ('# mySelector')). Trigger ('click');

— Daniel Nalbach

3

@DanielNalbach dalam versi Angular 1.2+ saat ini (dan tidak saat ini), Anda harus menggunakan triggerHandleralih-alihtrigger

— yorch

1

Saya tidak begitu yakin ini masih berfungsi ... angularjs 1.6 ini sepertinya tidak berfungsi dengan full jquery

— George Mauer

83

angular.element(domElement).triggerHandler('click');

EDIT: Tampaknya Anda harus keluar dari siklus $ apply () saat ini. Salah satu cara untuk melakukannya adalah dengan menggunakan $ timeout ():

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

Lihat biola: http://jsfiddle.net/t34z7/

— Blago
sumber

2

bahkan ini tidak berfungsi, kesalahannya muncul sebagai berikut Kesalahan: [$ rootScope: inprog] error.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)

— mulla.azzi

8

Anda mungkin ingin menggunakan Angular $timeoutdaripada setTimeout, karena $timeoutakan menjalankan $applysiklus untuk Anda jika perlu. Itu juga membuat kode Anda lebih bisa diuji karena ngMock memberi Anda kendali penuh atas kapan $timeoutdijalankan. docs.angularjs.org/api/ng/service/$timeout

— WildlyInaccurate

2

Sebenarnya ini harus dilakukan $timeout(fn, 0, false);agar tidak meminta $ apply, bukan?

— Martin Probst

2

Ini harus menjadi jawaban yang diterima. triggerHandler bekerja. trigger tidak di v1.2.25

— Howie

4

@deadManN $timeoutadalah layanan dan oleh karena itu perlu disuntikkan ketergantungan sebelum Anda dapat menggunakannya docs.angularjs.org/api/ng/service/$timeout

— WildlyInaccurate

19

Solusi berikut ini berfungsi untuk saya:

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

dari pada :

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

— jpmottin.dll
sumber

@DotKu Mungkin Anda sudah berada dalam fungsi $ scope seperti ketika Anda menggunakan fungsi $ timeout? Dengan kata lain, Anda tidak dapat memanggil $ scope. $ Apply () dalam $ scope. $ Apply () ... Saya harap ini bisa membantu Anda.

— jpmottin

@jpmottin Saya menemukannya, itu harus ditempatkan di $ timeout. Terima kasih

— Weijing Jay Lin

1

OMG, Angular benar-benar merusaknya. Mengapa mereka tidak bisa meniru jQuery$('#element').click()

— Jhourlad Estrella

13

Untuk berjaga-jaga jika semua orang melihatnya, saya menambahkan jawaban duplikat tambahan dengan baris penting yang tidak akan merusak propagasi acara

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

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

— Tersembunyi
sumber

Terima kasih! Ini akhirnya berhasil untuk saya di 1.5.11, dan dependensi jquery penuh. $ timeout (function () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}, 0);

— Florida G.

9

Menggunakan JavaScript lama biasa berhasil untuk saya:
document.querySelector('#elementName').click();

— charlchad.dll
sumber

Ya. Bekerja untuk saya. Terima kasih.

— ktaro

5

Solusi terbaik adalah dengan menggunakan:

domElement.click()

Karena angular.element(domElement).triggerHandler('click')peristiwa klik angularjs triggerHandler ( ) tidak menggelembung dalam hierarki DOM, tetapi peristiwa di atas melakukannya - seperti klik mouse biasa.

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

— Morten Holmgaard
sumber

4

Anda bisa melakukan seperti

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

— Fizer Khan
sumber

Saya mendapatkan kesalahan ini untuk solusi ini di aplikasi ng 1.5.3 saya: Mencari elemen melalui pemilih tidak didukung oleh jqLite.

— Todd Hale

1

Sampel sederhana:

HTML

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

JavaScript

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

Apa yang dilakukannya adalah mencari tombol iddan melakukan tindakan klik. Voila.

Sumber: https://techiedan.com/angularjs-how-to-trigger-click/

— Leniel Maccaferri
sumber

0

Kode ini tidak akan berfungsi (menimbulkan kesalahan saat diklik):

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

Anda perlu menggunakan querySelector sebagai berikut:

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

— Guillaume-Alexandre
sumber

0

Sertakan baris berikut dalam metode Anda di sana Anda ingin memicu peristiwa klik

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

— Vinayak Shedgeri
sumber