in angularjs how to access the element that triggered the event

Question

I use both Bootstrap and AngularJS in my web app  I m having some difficulty getting the two to work together   I have an element  which has the attribute data-provide  typeahead    lt input id  searchText  ng-model  searchText  type  text         class  input-medium search-query  placeholder  title         data-provide  typeahead  ng-change  updateTypeahead      gt    And I want to update the data-source attribute when the user inputs in the field  The function updateTypeahead is triggered correctly  but I don t have access to the element that triggered the event  unless I use     searchText    which is the jQuery way  not the AngularJS way   What is the best way to get AngularJS to work with old style JS module

User · Answer

To pass the source element in Angular 5     x000D   x000D   lt input  myInput type  text   change   someFunction myInput   gt  x000D   x000D   x000D

User · Answer

The general Angular way to get access to an element that triggered an event is to write a directive and bind   to the desired event   app directive  myChange   function       return function scope  element        element bind  change   function           alert  change on     element                      or with DDO  as per  tpartee s comment below    app directive  myChange   function       return        link   function link scope  element          element bind  change   function             alert  change on     element                             The above directive can be used as follows    lt input id  searchText  ng-model  searchText  type  text  my-change gt    Plunker   Type into the text field  then leave blur   The change callback function will fire   Inside that callback function  you have access to element   Some built-in directives support passing an  event object   E g   ng- click  ng-Mouse    Note that ng-change does not support this event     Although you can get the element via the  event object    lt button ng-click  clickit  event   gt Hello lt  button gt    scope clickit   function e        var elem   angular element e srcElement             this goes  deep against the Angular way  -- Misko

User · Answer

if you wanna ng-model value  if you can write like this in the triggered event   scope searchText

User · Answer

updateTypeahead this    will not pass DOM element to the function updateTypeahead this   Here this will refer to the scope  If you want to access the DOM element use updateTypeahead  event   In the callback function you can get the DOM element by event target      Please Note   ng-change function doesn t allow to pass  event as variable

User · Answer

you can get easily like this first write event on element  ng-focus  myfunction this     and in your js file like below   scope myfunction  function  msg   event        var el   event target     console log el       I have used it as well

User · Answer

I m not sure which version you had  but this question was asked for long time ago  Currently with Angular 1 5  I can use the ng-keypress event and debounce function from Lodash to emulate similar behavior like ng-change  so I can capture the  event   lt input type  text  ng-keypress  edit  event   ng-model  myModel  gt        scope edit     debounce function   event              console log   event    event           800

User · Answer

There is a solution using  element in the controller if you don t want to create another directive for this problem   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                            And this will work with ng-change    lt input id  searchText  type  text  class  search-query  ng-change  updateTypeahead    ng-model  searchText    gt

[javascript] in angularjs how to access the element that triggered the event?

Examples related to javascript

Examples related to angularjs