javascript - AngularJS での jQuery の blur イベントの置き換えは何ですか?

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()" />

基本的に、ディレクティブが行うことは、要素 (この例では入力) のぼかしイベントをバインドすることです。次に、イベントが発生すると (入力を離れると)、angular はディレクティブにあるものを適用します。したがって、私たちの場合、doFoo()入力を離れると起動されます。

プランカーはこちら: http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p=preview

Answer 2

Blurs、Focus、Double-Clicks イベントを提供する Angular UI @ http://angular-ui.github.io/ui-utils/を使用するか、Angular Js でネイティブにサポートされていないイベントにコールバックをバインドできます。

以下は、ぼかしイベントの例の 1 つです。

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

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

Answer 3

ネイティブの ng-blur 「最新の不安定版ではまったく機能しません。:(」 http://docs.angularjs.org/api/ng.directive:ngBlur

この投稿の手順に従ってこれを修正できます。「AngularJs では、blur イベントの直接サポートはありません。しかし、ディレクティブを作成することで、blur イベントのサポートを追加できます。」 http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html