web-dev-qa-db-ja.com

AngularJSのjQueryblurイベントの置き換えは何ですか？

Anglejsを使用してそのコンポーネントの外側をクリックすると、開いているコンポーネントを閉じる必要があります。ぼかしイベント用のangularディレクティブはありますか？ない場合は、どうすればよいですか？

javascriptjqueryangularjsonblur
13
Habibur Rahman

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

基本的に、ディレクティブが行うことは、要素（この例では入力）のblurイベントをバインドし、イベントが発生したときに（入力を残す）angularは、したがって、この場合、入力を残すとdoFoo()が起動されます。

ここのプランカー： http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p=preview

25
Jesus Rodriguez

Angular UI @ http://angular-ui.github.io/ui-utils/ を使用して、ブラー、フォーカス、ダブルクリックイベント、またはバインドを提供できますAngular Jsによってネイティブにサポートされていないイベントへのコールバック

以下はブラーイベントの例の1つです：

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

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

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が導入されたのかわかりません。

4
Walter Roman

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

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

1
Thiago Mata

フォーカスイベントとブラーイベントをサポートするディレクティブは、次のAngularJSリリースに含まれる予定です （参照） これはまもなくリリースされる予定です（私の推測では来月以内です）。 JQueryGuruが提案したように、待つことができない場合は、AngularUIプロジェクトのuiEventディレクティブを使用できます。

0
tamakisquare