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

Question

на 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.

512 7

javascript angularjs

7 ответов:

Comments

Ничего не найдено.

Mahbub · Accepted Answer · 2018-08-17 08:56:52

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

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

Mark Rajcok · Accepted Answer · 2016-09-23 17:46:03

общий угловой способ получить доступ к элементу, который вызвал событие, - это написать директиву и привязать () к нужному событию:
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);
    ...
это идет "глубоко против углового пути"-- Мишко.

score 5 · Accepted Answer · 2014-05-08 15:41:05

вы можете получить легко, как это первый добавить событие на элемент
ng-focus="myfunction(this)"
и в вашем js файле ниже
$scope.myfunction= function (msg, $event) {
    var el = event.target
    console.log(el);
}
я использовал его так же.

Tomasz Górka · Accepted Answer · 2016-03-01 15:05:54

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

dylan · Accepted Answer · 2013-09-27 09:27:35

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

Telvin Nguyen · Accepted Answer · 2017-10-12 09:09:38

Я не уверен, какая версия у вас была, но этот вопрос был задан давно. В настоящее время с угловой 1.5, я могу использовать ng-keypress событие и

Jasper Wiggerink · Accepted Answer · 2018-03-14 18:31:27

чтобы передать исходный элемент в угловой 5:
<input #myInput type="text" (change)="someFunction(myInput)">