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

键入文本字段，然后保留/ blur。将触发更改回调函数。在该回调函数中，您可以访问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)。在回调函数中，您可以通过event.target获取DOM元素。~~

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

Answer 3

您可以轻松地像元素

上的第一个写事件一样轻松
ng-focus="myfunction(this)"
您的js文件中的
和，如下所示

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

我也使用过它。

Answer 4

如果您不想为此问题创建另一个指令，则在控制器中使用$ 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" />

Answer 5

如果您想要模型值，如果您可以在触发事件中这样写： $ scope.searchText

Answer 6

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

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

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

Answer 7

传递Angular 5中的源元素：

＆＃13;

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

＆＃13;

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

7 个答案: