en angularjs ¿cómo acceder al elemento que desencadenó el evento?

Utilizo Bootstrap y AngularJS en mi aplicación web. Tengo algunas dificultades para que los dos funcionen juntos.

Tengo un elemento, que tiene el atributo data-provide="typeahead"

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

Y quiero actualizar el data-sourceatributo cuando el usuario ingresa en el campo. La función updateTypeaheadse activa correctamente, pero no tengo acceso al elemento que activó el evento, a menos que utilice $('#searchText'), que es la forma jQuery, no la forma AngularJS.

¿Cuál es la mejor manera de hacer que AngularJS funcione con el módulo JS de estilo antiguo?

 updateTypeahead(this)

no pasará el elemento DOM a la función updateTypeahead(this). Aquí thishará referencia al alcance. Si desea acceder al elemento DOM, use updateTypeahead($event). En la función de devolución de llamada, puede obtener el elemento DOM por event.target.

Tenga en cuenta: la función ng-change no permite pasar $ event como variable.

La forma angular general de obtener acceso a un elemento que desencadenó un evento es escribir una directiva y bind () al evento deseado:

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

o con DDO (según el comentario de @ tpartee a continuación):

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

La directiva anterior se puede utilizar de la siguiente manera:

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

Plunker .

Escribe en el campo de texto, luego deja / difumina. Se activará la función de devolución de llamada de cambio. Dentro de esa función de devolución de llamada, tiene acceso a element.

Algunas directivas integradas admiten pasar un objeto $ event. Por ejemplo, ng- * clic, ng-Mouse *. Tenga en cuenta que ng-change no admite este evento.

Aunque puede obtener el elemento a través del objeto $ event:

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

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

esto va "profundamente en contra de la forma Angular" - Misko .

puede obtener fácilmente como este primer evento de escritura en el elemento

ng-focus="myfunction(this)"

y en su archivo js como a continuación

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

Yo también lo he usado.

Hay una solución que usa $ element en el controlador si no desea crear otra directiva para este 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();
       });
    }
}]);

Y esto funcionará con ng-change :

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

si desea un valor de modelo ng, si puede escribir así en el evento desencadenado: $ scope.searchText

No estoy seguro de qué versión tenías, pero esta pregunta se hizo hace mucho tiempo. Actualmente con Angular 1.5, puedo usar el ng-keypressevento y la debouncefunción de Lodash para emular un comportamiento similar ng-change, así puedo capturar el evento $

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

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

Para pasar el elemento fuente en Angular 5:

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