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

Question

我在我的网络应用程序中使用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模块的最佳方法是什么？

Answer 1

获取对触发事件的元素的访问的一般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.

Answer 2

 updateTypeahead(this)

不会将DOM元素传递给函数updateTypeahead(this).这里this将参考范围.如果要访问DOM元素使用updateTypeahead($event).在回调函数中,您可以获取DOM元素event.target.

请注意:ng-change函数不允许将$ event作为变量传递.

Answer 3

你可以轻松地像元素上的第一个写事件一样轻松

ng-focus="myfunction(this)"

并在你的js文件中如下

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

我也用过它.