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，每次编译需要约1毫秒。当用户滚动时，我需要一次编译~100个元素。

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

如何？

编辑：从下方复制+粘贴我的评论，以便了解将来看到此主题的所有人的可见性：

好吧，它终于有道理了。如果将函数作为第二个参数传递给$ link，angular将为您克隆节点。如果不这样做，它将在每次调用$ link时重用相同的节点。无论哪种方式，您都可以同步访问返回的节点（作为$ link的返回值）和异步访问（在回调中）。这是一个设计不佳的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函数

1 个答案: