javascript - AngularJS中jQuery的模糊事件的替换是什么？

Question

使用 angularjs 在该组件外部单击时，我必须关闭任何打开的组件。是否有模糊事件的角度指令？如果没有，我该怎么做？

Answer 1

如果你不想使用 angular-ui 的ui-event，你也可以创建一个小指令，直到下一个版本Angular发布。

app.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

只需将指令放在您需要的地方：

<input type="text" ng-model="foo" ng-blur="doFoo()" />

基本上，指令所做的是绑定元素的模糊事件（在我们的示例中为输入），然后当事件被触发（我们离开输入）时，角度将应用指令中的内容。所以在我们的例子中，doFoo()如果我们离开输入，就会被解雇。

Plunker：http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p= preview

Answer 2

您可以使用 Angular UI @ http://angular-ui.github.io/ui-utils/提供模糊、焦点、双击事件或将回调绑定到 Angular Js 本身不支持的任何事件

以下是模糊事件的示例之一：

<input ui-event="{ blur : 'blurCallback()' }">

<script>
$scope.blurCallback = function() {
alert('Goodbye');
};
</script>

Answer 3

从 Angular 1.2.24* 开始，有一个ng-blur指令。

// View
<input 
    type="text"
    placeholder="Hello World!"
    ng-model="foo.bar"
    ng-blur="onBlur($event)"
    >

// Controller
$scope.onBlur = function($event) {
    return $event;
}

* 我不知道是在哪个 Angular 版本ng-blur中引入的。

Answer 4

本机 ng-blur “在最新的不稳定版本中根本不起作用。:(” http://docs.angularjs.org/api/ng.directive:ngBlur

你可以按照这篇文章“AngularJs 中没有对模糊事件的直接支持。但是我们可以通过创建指令来添加对模糊事件的支持”的步骤来解决这个问题。 http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html

Answer 5

支持焦点和模糊事件的指令将包含在下一个 AngularJS 版本（参考）中，它应该很快就会发布（我的猜测是在下个月内）。如果您迫不及待，就像 JQueryGuru 建议的那样，您可以使用uiEventAngularUI 项目中的指令。