no angularjs como acessar o elemento que disparou o evento?

Eu uso Bootstrap e AngularJS em meu aplicativo da web. Estou tendo alguma dificuldade em fazer os dois funcionarem juntos.

Eu tenho um elemento, que tem o 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()" />

E quero atualizar o data-sourceatributo quando o usuário inserir no campo. A função updateTypeaheadé disparada corretamente, mas não tenho acesso ao elemento que disparou o evento, a menos que eu use $('#searchText'), que é o jeito jQuery, não o jeito AngularJS.

Qual é a melhor maneira de fazer o AngularJS funcionar com o módulo JS de estilo antigo.

 updateTypeahead(this)

não passará o elemento DOM para a função updateTypeahead(this). Aqui thisvai se referir ao escopo. Se você deseja acessar o elemento DOM, use updateTypeahead($event). Na função de retorno de chamada, você pode obter o elemento DOM por event.target.

Observação: a função ng-change não permite passar $ event como variável.

A maneira Angular geral de obter acesso a um elemento que acionou um evento é escrever uma diretiva e ligar () ao evento desejado:

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

ou com DDO (conforme o comentário de @tpartee abaixo):

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

A diretiva acima pode ser usada da seguinte forma:

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

Plunker .

Digite no campo de texto e, em seguida, saia / desfoque. A função de retorno de chamada de alteração será acionada. Dentro dessa função de retorno de chamada, você tem acesso element.

Algumas diretivas integradas suportam a passagem de um objeto $ event. Por exemplo, ng- * clique, ng-Mouse *. Observe que ng-change não suporta este evento.

Embora você possa obter o elemento por meio do objeto $ event:

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

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

isso vai "profundamente contra o caminho Angular" - Misko .

você pode ficar assim facilmente primeiro evento de gravação no elemento

ng-focus="myfunction(this)"

e em seu arquivo js como abaixo

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

Eu também usei.

Existe uma solução usando $ element no controlador se você não quiser criar outra diretiva 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();
       });
    }
}]);

E isso funcionará com ng-change :

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

se você quiser o valor do modelo ng, pode escrever assim no evento disparado: $ scope.searchText

Não tenho certeza de qual versão você tinha, mas essa pergunta foi feita há muito tempo. Atualmente com o Angular 1.5, posso usar o ng-keypressevento e a debouncefunção do Lodash para emular um comportamento semelhante como ng-change, para que eu possa capturar o $ event

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

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

Para passar o elemento de origem no Angular 5:

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