jquery - AngularJS 和 jQuery : Splitting textarea into multiple textareas

Question

对于我正在从事的元素，我们想要创建一个报价模块，用户可以在其中根据动态值生成报价。该模块有 html 预览，可以下载为 pdf 版本，发送给客户。

使用提供的所有数据生成一个 html 页面。这是通过 View 中的 ng-model 完成的。接下来，我们通过检查每个元素是否在页面外部(每个页面的最小和最大高度为 29.7 厘米)来使用 jQuery 模拟多个页面。此功能已经修复，所以我们知道这是可行的。

问题是我们要检查，当用户在 textarea 中键入时，textarea 是否流出页面，如果是这样，我们要剪切 textarea 在发生溢出的地方用 jQuery 创建一个新的 textarea 并用 ng-model 填充剩余的字符。

我们研究过将所有字符拆分到一个数组中，但到目前为止还没有将其合并到 ng-model 中。 First approach , Second approach

所以问题是，是否可以检查是否发生溢出，如果发生溢出，则创建一个具有相同 ng-model 的新文本区域？任何帮助是极大的赞赏。

Answer 1

是的，这是可能的，我已经创建了一个基本示例，如何跟踪溢出并附加新的 textarea。

检查 fiddle

http://jsfiddle.net/88TzF/559/

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


app.directive("scrolls", function ($window) {
return {
  restrict : 'C',
  link : function(scope, element, attrs) {

  console.log(element);
    angular.element(element).bind("scroll", function() {
    console.log(this.scrollTop);
    var newarea = angular.element(document.getElementById('newarea'));
         if(this.scrollTop > 0 )
         {

          var appendTextbox= '<textarea width="200px" class="scrolls"  style="height:130px;overflow-y:scroll "></textarea>';
           newarea.append(appendTextbox);
           var childrens = newarea.children();
           var  textList = angular.element(document.getElementsByClassName('scrolls'));

           var tofocus = textList[textList.length-1];
           console.dir(textList.length);
           angular.element(tofocus).attr('autofocus','true');

         }
    });
    }
}; });