加速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每次编译需要大约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);
   })
});