我发现这个问题对于在有人按"输入"键时提交表单非常有用:
Javascript:
angular.module('yourModuleName').directive('ngEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
scope.$apply(function(){
scope.$eval(attrs.ngEnter, {'event': event});
});
event.preventDefault();
}
});
};
});
.HTML:
<div ng-app="" ng-controller="MainCtrl">
<input type="text" ng-enter="doSomething()">
</div>
我想知道的是,在按下"Enter"键时将字段设置为模糊。模糊发件人字段会是什么样子doSomething()
?
我想保留 ngEnter
指令原样,因为我想将其重用于其他功能。
更新:我知道我可以创建一个完整的指令只是为了模糊(这就是我现在拥有它的方式),但我想做的是能够做这样的事情:
<input type="text" ng-enter="this.blur()">
或者如何将当前元素作为参数传递?
<input type="text" ng-enter="doBlur(this)">
在尝试了一堆事情之后,这似乎是不可能的,因为您需要传递$event才能获取目标元素,因此单独的指令似乎是唯一的方法:
我们渴望什么:
不能传递this
,因为它引用范围,因此需要传递事件。
<input type="text" ng-enter="doBlur($event)">
一旦你有了事件,你就可以从中获取目标。
$scope.doBlur = function($event){
var target = $event.target;
// do more here, like blur or other things
target.blur();
}
但是,您只能在像ng-click这样的指令中获取传递事件...有点不满意。如果我们可以通过外部指令$event,我们就可以以您要求的可重用方式进行模糊处理。
for Angular 2+
<input ... (keydown.enter)='$event.target.blur()'>
SoluableNonagon 非常接近它。你只需要使用正确的参数。该指令将事件参数声明为event
而不是$event
。您可以像ngClick
一样更改指令以使用$event
(或者您保留它并按ng-enter="doSomething(event)"
使用它。
angular.module("app", [])
.controller('MainController', MainController)
.directive('myEnter', myEnter);
function MainController() {
var vm = this;
vm.text = '';
vm.enter = function($event) {
$event.target.blur();
vm.result = vm.text;
vm.text = '';
}
}
myEnter.$inject = ['$parse'];
function myEnter($parse) {
return {
restrict: 'A',
compile: function($element, attr) {
var fn = $parse(attr.myEnter, null, true);
return function(scope, element) {
element.on("keydown keypress", function(event) {
if (event.which === 13) {
// This will pass event where the expression used $event
fn(scope, { $event: event });
scope.$apply();
event.preventDefault();
}
});
};
}
};
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app="app" ng-controller="MainController as view">
<input my-enter="view.enter($event)" ng-model="view.text">
<div ng-bind="view.result"></div>
</div>