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"

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

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.

Answer 1

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:

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

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:

<button ng-click="clickit($event)">Hello</button>  $scope.clickit = function(e) {     var elem = angular.element(e.srcElement);     ... 

this goes "deep against the Angular way" -- Misko.

Answer 2

 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.