94

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

4

6 回答 6

75

获取触发事件的元素的一般 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-*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。

于 2013-02-13T21:59:52.573 回答
59 
 updateTypeahead(this)

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

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

于 2012-10-21T17:13:51.293 回答
8

你可以很容易地像第一次在元素上写事件一样

ng-focus="myfunction(this)"

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

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

我也用过。

于 2014-05-08T12:41:05.717 回答
2

如果您不想为此问题创建另一个指令，则可以在控制器中使用 $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" />
于 2016-03-01T13:00:51.800 回答
0

如果你想要 ng-model 值，如果你可以在触发事件中这样写：$scope.searchText

于 2013-09-27T06:27:35.857 回答
0

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

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

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

于 2017-10-12T06:09:38.850 回答