di angularjs bagaimana cara mengakses elemen yang memicu acara tersebut?

Saya menggunakan Bootstrap dan AngularJS di aplikasi web saya. Saya mengalami kesulitan untuk membuat keduanya bekerja sama.

Saya memiliki elemen, yang memiliki atribut data-provide="typeahead"

<input id="searchText" ng-model="searchText" type="text"
       class="input-medium search-query" placeholder="title"
       data-provide="typeahead" ng-change="updateTypeahead()" />

Dan saya ingin memperbarui data-sourceatribut ketika pengguna memasukkan di lapangan. Fungsinya updateTypeaheaddipicu dengan benar, tetapi saya tidak memiliki akses ke elemen yang memicu acara tersebut, kecuali saya menggunakan $('#searchText'), yang merupakan cara jQuery, bukan cara AngularJS.

Apa cara terbaik untuk membuat AngularJS bekerja dengan modul JS gaya lama.

 updateTypeahead(this)

tidak akan meneruskan elemen DOM ke fungsi updateTypeahead(this). Di sini thisakan mengacu pada ruang lingkup. Jika Anda ingin mengakses gunakan elemen DOM updateTypeahead($event). Dalam fungsi callback Anda bisa mendapatkan elemen DOM dengan event.target.

Harap Catatan: fungsi ng-change tidak memungkinkan untuk melewatkan $ event sebagai variabel.

Cara Angular umum untuk mendapatkan akses ke elemen yang memicu peristiwa adalah dengan menulis direktif dan bind () ke acara yang diinginkan:

app.directive('myChange', function() {
  return function(scope, element) {
    element.bind('change', function() {
      alert('change on ' + element);
    });
  };
});

atau dengan DDO (sesuai komentar @ tpartee di bawah):

app.directive('myChange', function() {
  return { 
    link:  function link(scope, element) {
      element.bind('change', function() {
        alert('change on ' + element);
      });
    }
  }
});

Arahan di atas dapat digunakan sebagai berikut:

<input id="searchText" ng-model="searchText" type="text" my-change>

Plunker .

Ketik di kolom teks, lalu biarkan / buram. Fungsi ubah panggilan balik akan aktif. Di dalam fungsi panggilan balik itu, Anda memiliki akses ke element.

Beberapa direktif bawaan mendukung penerusan objek $ event. Misalnya, ng- * klik, ng-Mouse *. Perhatikan bahwa ng-change tidak mendukung acara ini.

Meskipun Anda bisa mendapatkan elemen melalui objek $ event:

<button ng-click="clickit($event)">Hello</button>

$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...

ini berjalan "jauh berlawanan dengan cara Angular" - Misko .

Anda bisa mendapatkan dengan mudah seperti acara tulis pertama pada elemen ini

ng-focus="myfunction(this)"

dan di file js Anda seperti di bawah ini

$scope.myfunction= function (msg, $event) {
    var el = event.target
    console.log(el);
}

Saya telah menggunakannya juga.

Ada solusi menggunakan $ element di controller jika Anda tidak ingin membuat direktif lain untuk masalah ini:

appControllers.controller('YourCtrl', ['$scope', '$timeout', '$element',
        function($scope, $timeout, $element) {

    $scope.updateTypeahead = function() {
       // ... some logic here
       $timeout(function() {
           $element[0].getElementsByClassName('search-query')[0].focus();
           // if you have unique id you can use $window instead of $element:
           // $window.document.getElementById('searchText').focus();
       });
    }
}]);

Dan ini akan bekerja dengan ng-change :

<input id="searchText" type="text" class="search-query" ng-change="updateTypeahead()" ng-model="searchText" />

jika Anda ingin ng-model value, jika Anda dapat menulis seperti ini di event yang dipicu: $ scope.searchText

Saya tidak yakin versi mana yang Anda miliki, tetapi pertanyaan ini sudah lama ditanyakan. Saat ini dengan Angular 1.5, saya dapat menggunakan ng-keypressacara dan debouncefungsi dari Lodash untuk meniru perilaku serupa ng-change, jadi saya dapat menangkap $ event

<input type="text" ng-keypress="edit($event)" ng-model="myModel">

$ scope.edit = _.debounce (function ($ event) {console.log ("$ event", $ event)}, 800)

Untuk meneruskan elemen sumber di Angular 5:

<input #myInput type="text" (change)="someFunction(myInput)">