在 angularjs 中如何访问触发事件的元素？

 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 ABC2. 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.

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.

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

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.

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:

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

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

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

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