更新

Question

由于性能问题，我希望能够简单地编译一次模板，然后从中完全删除所有手表等，只需将最终模板用于显示目的。

我尝试使用$ compile但是只要在范围内使用$ destroy，包括解析内容在内的所有内容都会反转为默认值。

注意：这是关于Angularjs 1.5，而不是Angular 2

-----编辑1 ------

@Stepan Kasyanenko建议我可以使用单向绑定。我实际上正在使用它，但有一些问题：

我需要显示数千个表单行，而angularjs无法处理这些数量的手表，因此我决定仅通过打印这些行的显示版本来作弊。每当用户点击要编辑的行时，我就会将其与实际可编辑模型交换出来。对于这些只显示我正在使用单向绑定的行。
如果我可以跳过单向绑定会很好，因为它仍然会产生一些性能问题，但是比ngModel要少得多，这就是我问这个问题的原因。
使用单向绑定，似乎由于某种原因，即使在不同网站上使用相同的代码，行为也是不稳定的。有时，当用户输入内容时，实时模型会使用1个长文本进行更新，但显示版本只会获得第1个文本（可能是因为单向绑定应该有效。我能想到的唯一解决方案是重新编译此时显示行？

Answer 1

您可以使用one-way binding。

例如jsfiddle：

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.oneWay = "one";
    $scope.twoWay = "two";
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <div> One way
      <input ng-model="oneWay"> {{::oneWay}}
    </div>
    <div> Two way
      <input ng-model="twoWay"> {{twoWay}}
    </div>
  </div>
</div>

更新

我做了一些比较来绘制大量数据。

jsfiddle

上的示例

AngularJs v1.4.8。使用单向绑定。 100k记录 - 脚本为7秒，渲染为7秒。
jQuery v2.2.3。 100k记录 - 脚本为8秒，渲染为6秒。结果可能会更好。有必要通过单独的考试。
原生JS。 100k记录 - 脚本0.3秒，渲染6秒。

您可以看到最快的方式 - Native JS 。

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    var vm = this;
    vm.countRow = 100000;
    vm.arrayAngular = [];
    vm.startGenerateAngular = function() {
      vm.arrayAngular = [];
      for (var i = 0; i < vm.countRow; i++) {
        vm.arrayAngular.push(i);
      }
    }
  });

function startGenerateJQuery() {
  var count = $("#countRow").val() * 1;
  var $content = $("#contentJQuery");
  $content.html("");
  for (var i = 0; i < count; i++) {
    var divParent = $('<div>');
    var divChild = $('<div>');
    divChild.text(i);
    divParent.append(divChild);
    $content.append(divParent);
  }
}

function startGenerateNative() {
  var count = $("#countRow").val() * 1;
  var content = document.querySelector("#contentNative");
  content.innerHTML = "";
  for (var i = 0; i < count; i++) {
    var divParent = document.createElement('div');
    var divChild = document.createElement('div');
    divChild.innerText = i;
    divParent.appendChild(divChild);
    content.appendChild(divParent);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <input id="countRow" ng-model="vm.countRow">
    <div>Generate angular: 100k records - 7 sec on script, 7 second on render
      <br>
      <input type="button" ng-click="vm.startGenerateAngular()" value="Go">
    </div>
    <div>Generate jQuery: 100k records - 8 sec on script, 6 second on render
      <br>
      <input type="button" onclick="startGenerateJQuery()" value="Go">
    </div>
    <div>Generate Native: 100k records - 0.3 sec on script, 6 second on render
      <br>
      <input type="button" onclick="startGenerateNative()" value="Go">
    </div>
    <div ng-repeat="item in vm.arrayAngular">
      <div>{{::item}}</div>
    </div>
    <div id="contentJQuery">
    </div>
    <div id="contentNative">
    </div>
  </div>
</div>

Angular：如何编译一次然后销毁所有手表？

1 个答案:

更新