javascript - 在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 .