Jak wykryć onKeyUp w AngularJS?Jak wykryć onKeyUp w AngularJS?
Szukam dyrektywy "ngOnkeyup", podobnej do ngChange, ale nie mogę znaleźć niczego odpowiedniego.
Jeśli nie ma takiej dyrektywy, czy istnieje czysty sposób wywoływania kontrolera z natywnego zdarzenia typu onkeyup w przeglądarce?
EDIT: zobaczyć drugą odpowiedź poniżej od maklemenz który odnosi się do nowej wbudowanej ng-keyup dyrektywa
Mogłeś użyć angular-ui library:
Z kątowym-ui, można po prostu wykonaj następujące czynności:
<input ui-event="{keyup: 'myFn($event)'}"
Jeśli nie chcesz używać innej biblioteki, najskuteczniejszym i najprostszym sposobem jest:
JS
myApp.directive('onKeyup', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function() {
scope.$apply(attrs.onKeyup);
});
};
});
HTML:
<input on-keyup="count = count + 1">
Edit: Jeśli chcesz, aby wykryć który klawisz został naciśnięty, masz dwie podstawowe opcje naprawdę. Możesz dodać atrybut do dyrektywy, aby obsłużyć dozwolone klucze w dyrektywie, lub możesz przekazać klawisz wciśnięty do kontrolera. Ogólnie zalecam, aby dyrektywa zajmowała się kluczową metodą.
Oto przykład z obu sposobów: http://jsfiddle.net/bYUa3/2
Będziesz musiał utworzyć własną dyrektywę, jeśli domyślne dyrektywy nie są wystarczające. Coś takiego może być?
<!doctype html>
<html lang="en" ng-app="app">
<body ng-controller="ctrl">
<input ng-onkeyup="keyup()"/>
<script src="js/lib/angular-1.0.0.min.js"></script>
<script>
angular.module('app', []).directive('ngOnkeyup', function() {
return {
restrict: 'A',
scope: {
func: '&ngOnkeyup'
},
link: function(scope, elem, attrs) {
elem.bind('keyup', scope.func);
}
};
});
function ctrl($scope) {
$scope.keyup = function() {
alert('keyup fired');
};
}
</script>
</body>
</html>
FYI - właśnie szukają tego dzisiaj i wydaje się, że istnieje oddział w github kątowym, że porusza kwestię keyup keydown.
https://github.com/angular/angular.js/pull/1622
Został on włączony do pana ... Jednak to nie wygląda jak pojawi się w komunikacie aż 1.1.3
W celu zbudowania kątowa z opcją NG-keyup w miejscu możesz pobrać kod z git i uruchomić rake package w folderze. Oczywiście w systemie Windows oznacza to instalowanie Node.js i Ruby i ewentualnie innych obręczy (miałem błędy widelców na win32)
Mimo to dostałem w końcu "wbudowane" kluczowanie.
Oprócz wspomnianego już Event Binder, można teraz korzystać z tych wygodnych UI-key * dyrektyw z Kątowymi UI:
<textarea
ui-keypress="{13:'keypressCallback($event)'}">
</textarea>
<textarea
ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
</textarea>
<textarea
ui-keyup="{'enter':'keypressCallback($event)'}">
</textarea>
<script>
$scope.keypressCallback = function($event) {
alert('Voila!');
$event.preventDefault();
};
</script>
Dla wszystkich, szuka tej funkcji dzisiaj proszę skorzystać z oficjalnego dyrektywę ng-keyup:
<input type="text" ng-keyup="{expression}" />
Czy istnieje sposób, aby uzyskać klucz lub zdarzenia keydown na obiekt okna w ogóle; dzięki czemu mogę sprawdzić, czy naciśnięto klawisz Ctrl? –
@ ThePedPea Możesz umieścić swoją aplikację ng i klawiaturę ng na
. Następnie dodaj funkcję do $ rootScope lub dodaj kontroler ng. Nie testowany, ale powinien działać. – maklemenzJeśli rozumiem pytanie corectly, y szukasz dyrektywy ng-keyup. Oto link: http://docs.angularjs.org/api/ng.directive:ngKeyup
Po to, aby pomóc komukolwiek, kto, tak jak ja, chciał wystrzelić wydarzenie tylko na określonym kluczu. Oto kod używający ng-keyup, który wywołuje moją funkcję cancel() tylko wtedy, gdy wciśnięty jest escape. Aby dowiedzieć się, co keyCode chcesz spojrzeć na this website
ng-keyup="$event.keyCode == 27 ? cancel() : ''"
Zauważ, że jak wspomniano @maklemenz ten wykorzystuje wbudowany w kątowa dyrektywę dostępne teraz
Dzięki za odpowiedź. Jak uzyskać klucz, który został naciśnięty za pomocą rozwiązania nie-kątowego? – fadedbee
Dodałem coś do głównego posta o wykryciu klucza. –
To są właśnie to, czego potrzebuję. Dzięki za pomoc, naprawdę zaczynam kochać używając AngularJS. Szkoda, że nie wyrzucamy rocznego doświadczenia z używania KnockoutJS, ale AngularJS wydaje się być o wiele łatwiejszy w utrzymaniu i dostępny dla nowych deweloperów. – fadedbee