angularjs'de olayı tetikleyen öğeye nasıl erişilir?

Web uygulamamda hem Bootstrap hem de AngularJS kullanıyorum. İkisinin birlikte çalışmasını sağlamakta biraz zorluk çekiyorum.

Özniteliğine sahip bir öğem var data-provide="typeahead"

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

Ve güncellemek istiyorum data-source kullanıcı alana girdi girdiğinde özniteliği . İşlev updateTypeaheaddoğru şekilde tetikleniyor, ancak $('#searchText')AngularJS yolu yerine jQuery yolu olan kullanmadığım sürece olayı tetikleyen öğeye erişimim yok .

AngularJS'nin eski stil JS modülü ile çalışmasını sağlamanın en iyi yolu nedir?

 updateTypeahead(this)

DOM öğesini işleve aktarmayacaktır updateTypeahead(this). Burada thiskapsama değineceğiz. DOM öğesine erişmek istiyorsanız kullanın updateTypeahead($event). Geri arama işlevinde DOM öğesini kullanarak alabilirsiniz event.target.

Lütfen Dikkat: ng-change fonksiyonu, $ olayını değişken olarak geçirmeye izin vermez.

Bir olayı tetikleyen bir öğeye erişim sağlamanın genel Açısal yolu, bir yönerge yazmak ve istenen olaya bağlamaktır ():

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

veya DDO ile (@ tpartee'nin aşağıdaki yorumuna göre):

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

Yukarıdaki yönerge şu şekilde kullanılabilir:

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

Plunker .

Metin alanına yazın, ardından bırakın / bulanıklaştırın. Değişiklik geri arama işlevi etkinleşir. Bu geri arama işlevinin içinden erişebilirsiniz element.

Bazı yerleşik yönergeler bir $ olay nesnesinin iletilmesini destekler. Örneğin ng- * tıklama, ng-Mouse *. Ng-değişiminin bu olayı desteklemediğini unutmayın.

Öğeyi $ olay nesnesi aracılığıyla da alabilirsiniz:

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

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

bu "Angular yolunun derinliklerine" gider - Misko .

eleman üzerindeki bu ilk yazma olayı gibi kolayca alabilirsiniz

ng-focus="myfunction(this)"

ve js dosyanızda aşağıdaki gibi

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

Ben de kullandım.

Bu sorun için başka bir yönerge oluşturmak istemiyorsanız, denetleyicide $ element kullanan bir çözüm var:

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

Ve bu, ng-değişim ile çalışacaktır :

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

ng-model değeri istiyorsanız, tetiklenen olayda şöyle yazabilirseniz: $ kapsam.searchText

Hangi sürüme sahip olduğunuzdan emin değilim, ancak bu soru uzun zaman önce sorulmuştu. Şu anda Angular 1.5 ile, benzer davranışları taklit etmek için Lodash'taking-keypress olayı ve debounceişlevi kullanabilirim , böylece $ olayını yakalayabilirimng-change

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

$ kapsam.edit = _.debounce (fonksiyon ($ olay) {console.log ("$ olay", $ olay)}, 800)

Kaynak elemanı Angular 5'de geçirmek için:

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