В 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-модулем.

Ответ 1

 updateTypeahead(this)

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

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

Ответ 2

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

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" - Misko.

Ответ 3

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

ng-focus="myfunction(this)"

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

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

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

Ответ 4

Существует решение, использующее $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" />

Ответ 5

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

Ответ 6

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

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

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