2013-07-31 8 views
13

Ich muss jede geöffnete Komponente schließen, wenn ich mit angularjs außerhalb dieser Komponente klicke. Gibt es eine Winkelanweisung für Blur-Events? Wenn nicht, wie kann ich das tun?Was ist die Ersetzung von jQuerys Blur-Event in AngularJS?

+0

Die erste Antwort ist korrekt, aber ich möchte darauf hinweisen, dass dies kein jqury-Ereignis ist, es ist ein Javascript-Ereignis. Wenn Sie wirklich gut t clientseitige Programmierung bekommen wollen, versuchen Sie herauszufinden, was jquery unter der Haube tut – bigblind

Antwort

7

können Sie Angular UI verwenden @http://angular-ui.github.io/ui-utils/ die Unschärfen bieten, Fokus, Doppel-Klicks Ereignis oder einen Rückruf jedem Fall Binden nicht nativ unterstützt von Angular Js

Im Folgenden finden Sie eine der Beispiel Unschärfe Ereignis:

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

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

sir benutze es in meiner App, aber ui-Ereignis ist Feuer vor Modellwertänderung. Ich rufe Funktionstest (ng-Modell) auf ui-event = {blur:} in Funktion wird es mir alten Wert zeigen und auch erstmalig undefiniert –

0

Richtlinien Fokus und Unschärfe Ereignisse unterstützt werden eingeschlossen in den nächsten AngularJS (reference) Version, die bald aus sein sollte (meine Vermutung ist, innerhalb des nächsten Monats). Wenn Sie nicht warten können, wie es JQueryGuru vorgeschlagen hat, können Sie die Anweisung uiEvent aus dem AngularUI-Projekt verwenden.

25

Wenn Sie nicht angular-ui's ui-event verwenden möchten, können Sie auch eine kleine Direktive erstellen, bis die nächste Version von Angular freigegeben wird.

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

Einfach die Richtlinie wo Sie sie brauchen:

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

Im Grunde, was die Richtlinie tut, ist die Unschärfe Ereignis des Elements (in unserem Beispiel der Eingabe) und dann zu binden, wenn das Ereignis gefeuert (wir lassen die Eingabe) eckig wendet an, was in der Direktive steht. In unserem Fall wird doFoo() ausgelöst, wenn wir die Eingabe verlassen.

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

+1

Hey Jesus, wenn ich das zu meinem Code hinzufüge sagt es 'Uncaught ReferenceError: App ist nicht definiert wtf? – pythonian29033

+0

ng-blur funktioniert nicht mit der stabilen Version, die neueste, instabile Version muss verwendet werden – pythonian29033

+1

'app' ist nur eine Referenz zu meinem Modul. benutze 'angular.module ('yourmodule'). directive ...'. Angular 1.2 kommt mit einer Unschärfe-Anweisung, also ist dies für 1.0.x oder 1.1.x –

4

Ab Angular 1.2.24 * gibt es eine ng-blur Richtlinie.

* Ich weiß nicht, in welche Winkelversion ng-blur eingeführt wurde.