AngularJS 和 jQuery：将文本区域拆分为多个文本区域

Question

对于我正在进行的一个项目，我们希望创建一个报价模块，用户可以在其中从动态值生成报价。该模块有 html 预览，可以下载为 pdf 版本，发送给客户。

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

问题是我们想检查，当用户输入textarea时，文本区域是否流到页面外，如果是，我们想剪切发生溢出的textarea并创建一个新的textarea 使用 jQuery 并用 ng-model 填充剩余的字符。

我们已经考虑将所有字符拆分为一个数组，但到目前为止将其合并到ng-model 中还没有成功。 First approach, Second approach

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

Answer 1

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

检查小提琴

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');

         }
    });
    }
}; });