в angularjs, как получить доступ к элементу, который вызвал событие?

Я использую в своем веб-приложении как Bootstrap, так и AngularJS. Мне трудно заставить этих двоих работать вместе.

У меня есть элемент с атрибутом data-provide="typeahead"

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

И я хочу обновить data-sourceатрибут, когда пользователь вводит данные в поле. Функция updateTypeaheadзапускается правильно, но у меня нет доступа к элементу, вызвавшему событие, если я не использую $('#searchText')способ jQuery, а не способ AngularJS.

Как лучше всего заставить AngularJS работать с JS-модулем старого стиля?

 updateTypeahead(this)

не будет передавать элемент DOM функции updateTypeahead(this). Здесь thisбудет ссылка на область применения. Если вы хотите получить доступ к элементу DOM, используйте updateTypeahead($event). В функции обратного вызова вы можете получить элемент DOM с помощью event.target.

Обратите внимание: функция ng-change не позволяет передавать событие $ как переменную.

Общий способ Angular получить доступ к элементу, вызвавшему событие, - это написать директиву и привязать () к желаемому событию:

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

или с DDO (согласно комментарию @ tpartee ниже):

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

Вышеуказанная директива может использоваться следующим образом:

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

Plunker .

Введите текст в текстовое поле, затем оставьте / размыть. Сработает функция обратного вызова изменения. Внутри этой функции обратного вызова у вас есть доступ к element.

Некоторые встроенные директивы поддерживают передачу объекта $ event. Например, ng- * click, ng-Mouse *. Обратите внимание, что ng-change не поддерживает это событие.

Хотя вы можете получить элемент через объект $ event:

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

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

это идет "глубоко против Angular" - Миско .

вы можете легко получить это первое событие записи в элементе

ng-focus="myfunction(this)"

и в вашем js файле, как показано ниже

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

Я тоже его использовал.

Если вы не хотите создавать другую директиву для этой проблемы, есть решение, использующее $ element в контроллере:

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

И это будет работать с ng-change :

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

если вы хотите значение ng-модели, если вы можете написать так в инициированном событии: $ scope.searchText

Не знаю, какая у вас была версия, но этот вопрос задавали давно. В настоящее время с Angular 1.5 я могу использовать ng-keypressсобытие и debounceфункцию из Lodash для имитации аналогичного поведения, например ng-change, чтобы я мог захватить событие $

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

$ scope.edit = _.debounce (функция ($ event) {console.log ("$ event", $ event)}, 800)

Чтобы передать исходный элемент в Angular 5:

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