how to add directive attribute to element in link function? - angularjs

Question

As we known, the angular have performance if there are more than 2000 records in the page, because only some of the records need add some behavior , so I would prefer to dynamically add attribute to element according model value in link function, as there will be less watches.
So I use $compile to recompile the element like below:
mainApp.directive("popoverSetting", function ($compile) {
return {
restrict: "A",
link: function (scope, element, attrs) {
if (scope.item.isTrue) {
element.attrs("ns-popover-trigger", "mouseenter");
element.attrs("ns-popover-timeout", "0.01");
$compile(element)(scope);
}
}
}
})
Because there are about 1000 records, so the speed is very slow, is there some other way to add attribute and compile quickly? although there only 5 records need to add these attribute, it still increase about twofold time than before.

Answer 1

The problem with trying to do this is that nested compiles are slow (an understatement), especially when you are talking thousands of them. It just isn't the way to go.
I could see where some may consider this ugly, and depending on your needs, this solution may NOT work for you, but it does get everything compiled pretty quickly, with the attributes applied. I ended up building a compiler directive that would generate markup based on the dataset, adding the necessary attributes if isTrue was true, and then compiling the whole thing once. The ugly part is that it doesn't generate bindings. So if you need to change something or update something, you'll have to recompile the whole thing.
It's running right now at about 200-300ms to compile the whole thing with 2000 items in the dataset.
Plunker
Directives:
app.directive('nsPopoverTrigger', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on(attrs.nsPopoverTrigger, function() {
console.log('popover triggered')
})
}
}
})
app.directive('compiler', function($compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var i = 0, template = '<ul>'
scope.generateMarkup = function() {
for (i; i < scope.data.length; i++) {
if(scope.data[i].isTrue) {
template = template + "<li ns-popover-trigger='mouseenter' ns-popover-timeout='0.01'>" + scope.data[i].key + "</li>"
} else {
template = template + '<li>' + scope.data[i].key + '</li>'
}
}
var $template = angular.element(template)
$compile($template)(scope)
element.append($template)
}
}
}
})

Answer 2

because I don't remove the directive so it makes the angular compile element over and over again. so i need to remove the directive or set a flat to determine if it is necessary to compile again.
function groupPopoverDirective($compile) {
return {
restrict: "A",
scope:true,
link: function ($scope, $element, $attrs) {
$scope.groupPopoverData = $scope.$eval($attrs.groupPopoverData);
if ($scope.groupPopoverData.isTrue) {
if ($element.attr("ns-popover")) {
return;
}
$element.attr("ns-popover", "true");
$element.attr("ns-popover-template", "popover-template.html");
$element.attr("ns-popover-trigger", "mouseenter");
$element.attr("ns-popover-placement", "right|top");
$element.attr("ns-popover-mouse-relative", "x");
$element.attr("ns-popover-theme", "ns-popover-tooltip-theme");
$element.attr("ns-popover-timeout", "0.01");
//element.removeAttr('popover-info');
var linkFn = $compile($element);
var pp = linkFn($scope);
}
}
};
};