尝试使用 ng-keypress 跟踪文本区域的行

Question

*注意，换行对我来说无关紧要，我需要基于换行字符数的行号，因为我以后要拆分 vm.text 并像访问它一样一个数组。

我想知道每次按下回车键时我在文本区域的哪一行。我遵循了这里的答案： Find out the 'line' (row) number of the cursor in a textarea

我尝试将它与 ng-keypress 合并，如下所示：

enmasse.html

<form role="form" ng-submit="vm.submit()">
<div class="form-group">
    <h2 layout="column" layout-align="center center">Multi-Event Creation</h2>
    <br>

    <div>Input Formats</div>
    <!-- display input 'rulebook' here -->
    <br>
    <md-input-container>
        <label style="color:#545454">Enter your events/tasks, line by line</label>
        <textarea cols="50" ng-keypress="vm.check(this, $event.keyCode)" ng-model="vm.text" required></textarea>
    </md-input-container>

    <div class="form-group" layout="column" layout-align="center center">
        <md-button class="md-raised md-primary btn-submit" type="submit">Submit</md-button>
    </div>

</div>

请注意，我正在使用 ngDialog 将我的控制器连接到我的表单。

enmasse-controller.js

(function () {
'use strict';

angular
    .module('app.enmasse.controllers')
    .controller('EnmasseController', EnmasseController);

EnmasseController.$inject = ['$rootScope', '$scope', 'Authentication', 'Snackbar', 'Posts', 'Access'];

function EnmasseController($rootScope, $scope, Authentication, Snackbar, Posts, Access) {
    var vm = this;
    vm.submit = submit;
    vm.check = check;
    vm.lineNumber;

    function check(textarea, keyCode) {
        //console.log(keyCode); *works

// trouble in this section
        if (keyCode == 13) {
            vm.lineNumber = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
            console.log(vm.lineNumber);
        }
//

        //if (keyCode==13) {
        //console.log(vm.text); *works for pulling all text in textarea, but need to pull the previous line!
        //validate();
        //}
    }

    function submit() { //called when all the lines are validated and user clicks submit
    }
}
})();

浏览器控制台向我抛出以下错误 --> TypeError: Cannot read 属性 'substr' of undefined

我该如何解决这个问题？

Answer 1

那是因为 angular 表达式中的 this 不是 DOM 节点。您可以改为传递事件：

<textarea cols="50" ng-keypress="vm.check($event, $event.keyCode)" ng-model="vm.text" required></textarea>

并将textarea设置为事件的目标：

function check(event, keyCode) {
     var textarea = event.target;
     ...
}

尝试使用 ng-keypress 跟踪文本区域的行

Attempting to track row of textarea with ng-keypress

html

textarea

angularjs