javascript - 输入空格时如何触发 ng-change？

Question

我有一个在 textarea 的值更改时调用的函数。它工作得很好，除非按下空格键，然后什么都不被调用。有没有办法激活这个？从技术上讲，内容正在发生变化，我希望无论如何都可以调用该函数。

我附上了代码的小提琴。您可以看到$scope.log按下空格键时数组不会推送新元素（输入键也是如此），但它与任何其他非空格键一起使用。

小提琴样本：http: //jsfiddle.net/UJWLN/4/

Answer 1

您可以在输入中使用指令 ng-trim 并将其设置为 false，如下所示：

<textarea ng-change="changeFunction()" ng-model="myModel" ng-trim="false"></textarea>

但这并不适用于所有情况。如果您希望在每次击键时执行某些操作，请尝试使用自定义指令。我给你写了一篇：

http://jsfiddle.net/UJWLN/6/

myApp.directive('ngKeystroke', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            elem.bind("keyup", function(){
                scope.log.push('called');
                scope.$digest(); 
            });
        }
    };
});

Answer 2

为了在空格键上触发ng-change事件，我使用了ng-trim. 它工作正常。

<textarea ng-model="myCtrl.content" name="content" ng-trim="false" rows="5" cols="15" maxlength="250"></textarea>

Answer 3

最好试试这个jsfiddle

html

<div ng-controller="MyCtrl">
    <textarea key-listener="changeFunction()" ng-model="myModel"></textarea>
    <div>{{log}}</div>
</div>

javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.log=[];
    $scope.changeFunction=function(){
        $scope.log.push('Called');
    }
}

myApp.directive('keyListener', function() {
    return function(scope, elm, attrs) {
        elm.bind("keyup", function(event) {
            scope.$apply(attrs.keyListener);
        });
    };
})

Answer 4

如果有人回到这个。

我刚刚在文档中阅读了这个： https: //docs.angularjs.org/api/ng/input/input%5Btext%5D ngTrim（可选）

布尔值

如果设置为 false Angular 将不会自动修剪输入。对于 input[type=password] 控件，此参数将被忽略，它永远不会修剪输入。

Answer 5

对我来说，以下代码有效：

HTML：

<input type="text" ng-model="typedEmail" ng-keyup="($event.keyCode == 32) ? validateEmail(typedEmail) : ''">

控制器：

$scope.validateEmail = function(emailId){
 //Your Code goes here
};

事件代码 32：指空格键事件代码

同理，
事件代码 13：指 Enter 键事件代码
事件代码 16：指 Shift 键事件代码
事件代码 17：指 Control 键事件代码
事件代码 18：指Alt键事件代码

只需参考ng-key文档，您就可以在那里尝试 keyCode 值（在角度文档的示例中）。