in angularjs come accedere all'elemento che ha attivato l'evento?

Uso sia Bootstrap che AngularJS nella mia app web. Ho qualche difficoltà a far lavorare i due insieme.

Ho un elemento, che ha l'attributo data-provide="typeahead"

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

E voglio aggiornare l' data-sourceattributo quando l'utente inserisce nel campo. La funzione updateTypeaheadè attivata correttamente, ma non ho accesso all'elemento che ha attivato l'evento, a meno che non utilizzi $('#searchText'), che è il modo jQuery, non il modo AngularJS.

Qual è il modo migliore per far funzionare AngularJS con il modulo JS vecchio stile.

 updateTypeahead(this)

non passerà l'elemento DOM alla funzione updateTypeahead(this). Qui si thisfarà riferimento all'ambito. Se vuoi accedere all'elemento DOM usa updateTypeahead($event). Nella funzione di callback puoi ottenere l'elemento DOM da event.target.

Nota: la funzione ng-change non consente di passare $ event come variabile.

Il modo angolare generale per ottenere l'accesso a un elemento che ha attivato un evento è scrivere una direttiva e bind () all'evento desiderato:

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

o con DDO (come da commento di @ tpartee di seguito):

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

La direttiva di cui sopra può essere utilizzata come segue:

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

Plunker .

Digita nel campo di testo, quindi lascia / sfoca. La funzione di callback di modifica verrà attivata. All'interno di quella funzione di callback, hai accesso a element.

Alcune direttive incorporate supportano il passaggio di un oggetto $ event. Ad esempio, ng- * clic, ng-Mouse *. Nota che ng-change non supporta questo evento.

Sebbene sia possibile ottenere l'elemento tramite l'oggetto $ event:

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

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

questo va "in profondità contro la via angolare" - Misko .

puoi ottenere facilmente come questo primo evento di scrittura sull'elemento

ng-focus="myfunction(this)"

e nel tuo file js come sotto

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

Anch'io l'ho usato.

Esiste una soluzione che utilizza $ element nel controller se non si desidera creare un'altra direttiva per questo problema:

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

E questo funzionerà con ng-change :

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

se vuoi il valore ng-model, se puoi scrivere in questo modo nell'evento attivato: $ scope.searchText

Non sono sicuro di quale versione avessi, ma questa domanda è stata posta molto tempo fa. Attualmente con Angular 1.5, posso utilizzare l' ng-keypressevento e la debouncefunzione di Lodash per emulare comportamenti simili come ng-change, in modo da poter catturare l'evento $

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

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

Per passare l'elemento sorgente in Angular 5:

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