javascript 从 Angular 指令获取输入字段的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21273582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get value of input field from Angular directive
提问by nathancahill
I'm using the directive from this answerto run a function when the enter key is pressed in an input field.
当在输入字段中按下 Enter 键时，我正在使用这个答案中的指令来运行一个函数。
How can I pass the value of the input field element.val()to the function the directive calls? Or pass the input field elementto the function, to clear the value after it's retrieved.
如何将输入字段的值传递element.val()给指令调用的函数？或者将输入字段传递element给函数，以在检索到值后清除该值。
HTML
HTML
<input type="text" ng-enter="newField()" />
JS
JS
app.directive('ngEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
element.val(); // value of input field
scope.$apply(function(){
scope.$eval(attrs.ngEnter); // passed to this function
});
event.preventDefault();
}
});
};
});
采纳答案by m59
You could just do this:
你可以这样做：
var func = scope.$eval(attrs.ngEnter);
func();
and have the controller take care of the value logic. See the code below. Live demo (click).
并让控制器处理值逻辑。请参阅下面的代码。现场演示（点击）。
Also, I don't recommend prefixing your custom directives with ng. I suggest coming up with your own prefix as a namespace. ngis for Angular's core. In my examples, I am using my-enterrather than ng-enter.
另外，我不建议在您的自定义指令前加上ng. 我建议提出您自己的前缀作为命名空间。ng用于 Angular 的核心。在我的示例中，我使用的是my-enter而不是ng-enter.
Sample markup:
示例标记：
<input
type="text"
ng-model="foo"
my-enter="myFunc"
placeholder="Type stuff!"
>
<p ng-repeat="val in cachedVals track by $index">{{val}}</p>
JavaScript:
JavaScript：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cachedVals = [];
$scope.foo = '';
$scope.myFunc = function() {
$scope.cachedVals.push($scope.foo);
$scope.foo = '';
};
});
app.directive('myEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
scope.$apply(function(){
var func = scope.$eval(attrs.myEnter);
func();
});
event.preventDefault();
}
});
};
});
Here's an example with an isolated scope - you don't need to $eval.
这是一个具有隔离作用域的示例 - 您不需要$eval.
app.directive('myEnter', function() {
return {
scope: {
func: '=myEnter'
},
link: function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
scope.$apply(function(){
scope.func();
});
event.preventDefault();
}
});
}
};
});
回答by Matt Way
Have you tried ng-submit? I have created a fiddle to show you how do to what you are after without requiring your own directive.
你试过ng-submit吗？我创建了一个小提琴来向您展示如何在不需要您自己的指令的情况下完成您所追求的事情。
Obviously this answer depends on your requirements, and the form complexity.
显然，这个答案取决于您的要求和表单的复杂性。
