加速 Angular $compile 函数

Question

我正在针对新范围手动编译模板：

var scope = _.assign($rootScope.$new(true), {
  foo: 1,
  bar: 2
})
var element = angular.element('<my-element foo="foo" bar="bar"></my-element>')
$compile(element)(scope)
element.appendTo(container)

在运行个基本配置文件之后，此代码最慢的部分是 $compile，每次编译需要 ~1ms。当用户滚动时，我需要一次编译约 100 个元素。

我可以应用很多优化来加速编译在第一轮 $compiles 之后，但我想加快第一轮 100编译。我还想将模板保留在 Angularland 中，并避免注入原始 HTML.

如何？

编辑： 从下方复制并粘贴我的评论，以便将来看到此主题的任何人都能看到：

好的，终于说得通了。如果您将函数作为第二个参数传递给 $link，angular 将为您克隆该节点。如果不这样做，它将在每次调用 $link 时重复使用相同的节点。无论哪种方式，您都可以同步访问 returned 节点（作为 $link 的 return 值）和异步访问（在您的回调中）。这是一个设计不佳的 API，我在 Angular 的问题跟踪器中提交了一个问题 - github.com/angular/angular.js/issues/11824

Answer 1

如果元素具有相同的结构，只是它们链接的范围不同，那么您应该 $compile 模板一次然后 link 100 个元素中的每一个都针对各自的范围。

var myElement = angular.element('<my-element foo="foo" bar="bar"></my-element>');
var myElementLinkFn = $compile(myElement);


// "items" here is the data that drives the creation of myElement elements
angular.forEach(items, function(item){
   var newScope = $scope.$new(true);

   newScope.foo = item.foo;
   newScope.bar = item.bar;

   myElementLinkFn(newScope, function(clone){
      container.append(clone);
   })
});

加速 Angular $compile 函数

Speeding up Angular $compile function

javascript

frontend

angularjs

angularjs-directive

angularjs-scope