如何解决angulars性能问题与大型内容如何解决、性能、内容、问题
我熟悉角的消化周期以及它如何影响长列表和大型模型值的表现。如果你有问题什么解决办法专门针对我的情况，我只是好奇。我建立一个应用程序可能会或可能不会要求用户输入大文本，如，但由于具有双向数据相关联的角度固有问题的错误日志中的的textarea绑定的大型模型它导致我的应用程序挂起。
I'm familiar with angular's digest cycle and how it affects performance with long lists and large model values. I'm just curious if you have any workaround for the problem specifically for my case.
I'm building an app which may or may not require user to enter large text such as error log in the textarea, but due to angular inherent issue associated with 2-way data binding on large model its causing my app to hang.
目前我要求用户在一个文件大内容附加。但我想知道是否有任何方式都得到解决此问题。我能想到的一个潜在的解决方法是不使用文本字段模型，并采用了棱角分明的轻量级的jQuery API angular.element（'＃MYTEXT'）访问文本。VAL（）。但是这种做法带有紧密结合JS code。与DOM这是不是一个好的做法的缺点。我感兴趣的是更多的角的风格的解决方案。
Currently I'm asking users to attach large contents in a file. But I was wondering if there is any way at all to get around the issue.
One potential workaround I can think of is to not to use model on the text field and access the text using angular's lightweight jquery api angular.element('#mytext').val(). But this approach comes with disadvantage of closely binding JS code with DOM which is not a good practice. I'm interested in more "angular" style solution.
下面就是这表明性能问题的plunkr。看到坑，开始在文本输入区，你会遇到严重滞后
Here's the plunkr which demonstrates performance issue. To see the hang, start typing in the text area and you'll experience severe lag
http://plnkr.co/edit/0wccRJjjlhJqZtdipDLv?p=$p$ PVIEW
推荐答案
的瓶颈是不是一个摘要（这将有助于但是可以通过的 ngModelOptions '反跳'选项），但是的按文本区域指令当 NG-模型使用元素。
The bottleneck is not a digest (which would contribute but could be effectively fought with ngModelOptions 'debounce' option) but a listener added by textarea directive when ng-model is used on the element.
这样的性能问题提出定制指令（在这种情况下 ngModel ）的使用，而不是内置的。对于双向绑定可能是
This kind of performance issues suggests the usage of custom directive instead of built-in ones (ngModel in this case). For two-way binding it may be
app.directive('bigText', function () {
return {
scope: {
bigText: '='
},
template: '<textarea>',
link: function (scope, element) {
// .val(value) on directive init
var initialized = false;
// prevents .val(oldValueFromOutside) on input
var internalChange = false;
var $textarea = element.find('textarea');
scope.$watch('bigText', function (oldVal, newVal) {
if (internalChange || (initialized && oldVal === newVal)) return;
initialized = true;
$textarea.val(newVal);
});
// generic JS debounce,
// for ex. https://github.com/niksy/throttle-debounce
var handler = debounce(1000, function () {
var text = $textarea.val();
if (scope.bigText !== text) {
internalChange = true;
scope.$apply(function () {
scope.bigText = text;
});
internalChange = false;
}
});
$textarea.on('change keyup', handler);
// $textarea.off on scope destroy
}
};
});
在手动保持双向绑定的重要组成部分，是使用 internalChange 标志，它prevents得到来自外部范围旧值的newval 的摘要（鸡/蛋的困境）。
The important part in maintaining two-way bindings manually is using internalChange flag, it prevents getting old value from outer scope as newVal on digest (chicken/egg dilemma).
有些事情也可以从角指令给输入事件的性能和的兼容性。
Some things may also be learned from the treatment that Angular directives give to input events for performance and compatibility.
请注意，类似的性能问题，可以通过 Chrome有错误所致并没有角的应用程序。
Notice that similar performance issues may be caused by Chrome bug and not by Angular application.
