w angularjs jak uzyskać dostęp do elementu, który wywołał zdarzenie?

W mojej aplikacji internetowej używam zarówno Bootstrap, jak i AngularJS. Mam pewne trudności ze zmobilizowaniem tych dwóch do współpracy.

Mam element, który ma atrybut data-provide="typeahead"

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

Chcę zaktualizować data-sourceatrybut, gdy użytkownik wprowadzi dane w polu. Funkcja updateTypeaheadjest wyzwalana poprawnie, ale nie mam dostępu do elementu, który wyzwolił zdarzenie, chyba że używam $('#searchText'), co jest sposobem jQuery, a nie sposobem AngularJS.

Jaki jest najlepszy sposób, aby AngularJS działał ze starym modułem JS.

 updateTypeahead(this)

nie przekaże elementu DOM do funkcji updateTypeahead(this). Tutaj thisbędzie odnosić się do zakresu. Jeśli chcesz uzyskać dostęp do elementu DOM, użyj updateTypeahead($event). W funkcji callback możesz pobrać element DOM przez event.target.

Uwaga: funkcja ng-change nie pozwala na przekazanie zdarzenia $ event jako zmiennej.

Ogólnym sposobem Angulara na uzyskanie dostępu do elementu, który wywołał zdarzenie, jest napisanie dyrektywy i powiązanie () z żądanym zdarzeniem:

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

lub z DDO (zgodnie z komentarzem @ tpartee poniżej):

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

Powyższa dyrektywa może być używana w następujący sposób:

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

Plunker .

Wpisz tekst w polu tekstowym, a następnie pozostaw / zamaż. Funkcja wywołania zwrotnego zmiany zostanie uruchomiona. Wewnątrz tej funkcji zwrotnej masz dostęp do element.

Niektóre dyrektywy wbudowane obsługują przekazywanie obiektu $ event. Np. Ng- * klik, ng-Mouse *. Zauważ, że ng-change nie obsługuje tego zdarzenia.

Chociaż możesz pobrać element za pośrednictwem obiektu $ event:

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

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

to idzie „głęboko pod Angular” - Misko .

możesz łatwo uzyskać takie pierwsze zdarzenie write na elemencie

ng-focus="myfunction(this)"

i w swoim pliku js, jak poniżej

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

Ja też go użyłem.

Istnieje rozwiązanie wykorzystujące $ element w kontrolerze, jeśli nie chcesz tworzyć kolejnej dyrektywy dla tego problemu:

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

I to zadziała z ng-change :

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

jeśli chcesz wartość modelu ng, jeśli możesz napisać w ten sposób w wyzwalanym zdarzeniu: $ scope.searchText

Nie jestem pewien, którą wersję miałeś, ale to pytanie zostało zadane dawno temu. Obecnie w Angular 1.5 mogę użyć ng-keypresszdarzenia i debouncefunkcji z Lodash do emulacji podobnego zachowania ng-change, dzięki czemu mogę przechwycić zdarzenie $

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

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

Aby przekazać element źródłowy w Angular 5:

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