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

我在我的Web应用程序中同时使用了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模块一起工作的最佳方法是什么。

 updateTypeahead(this)

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

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

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

柱塞。

在文本字段中键入，然后离开/模糊。更改回调函数将触发。在该回调函数中，您可以访问element。

一些内置指令支持传递$ event对象。例如，ng- *单击，ng-鼠标*。请注意，ng-change不支持此事件。

虽然可以通过$ event对象获取元素：

<button ng-click="clickit($event)">Hello</button>

$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...

这就是“深深地反对Angular方式” -Misko。

您可以像在元素上的第一个write事件一样轻松获得

ng-focus="myfunction(this)"

并在您的js文件中，如下所示

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

我也用过它。

如果您不想为此问题创建另一个指令，则可以在控制器中使用$ element解决方案：

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();
       });
    }
}]);

这将与ng-change一起工作：

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

如果您想使用ng-model值，则可以在触发的事件中这样写：$ scope.searchText

我不确定您使用的是哪个版本，但是很久以前就问过这个问题。目前在Angular 1.5中，我可以使用ng-keypress Lodash中事件和debounce函数来模拟类似的行为，因此我可以捕获$ eventng-change

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

$ scope.edit = _.debounce（function（$ event）{console.log（“ $ event”，$ event）}，800）

在Angular 5中传递源元素：

<input #myInput type="text" (change)="someFunction(myInput)">