Geek Answers Handbook

Speed ​​up Angular $ compile

I manually compile the template for the new scope:

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)

After starting the base profile, the slowest part of this code $compile, which takes ~ 1 ms to compile. I need to collect ~ 100 items at a time when the user scrolls.

There are many optimizations that I can apply to speed up compilation after the first round of compiling $ , but I would like to speed up the 1st round of 100 compilations. I would also like to save the templates in Angularland and not introduce raw HTML.

How?

Edit: Copy + paste my comment below to view it for anyone who sees this stream in the future:

, , , . $link, angular node . , node $link. node ( $link) ( ). API, angular - github.com/angular/angular.js/issues/11824

+4
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);
   })
});
+7

More articles:


All Articles