如何将指示属性添加到链接功能中的元素

Question

众所周知，如果页面中有2000多个记录，则角度具有性能，因为只有某些记录需要添加某些行为，因此我宁愿动态地将属性添加到链接函数中的元素值，因为手表将少。

所以我使用$ compile来重新编译以下元素：

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

因为大约有1000个记录，所以速度非常慢，还有其他方法可以添加属性并快速编译吗？尽管只有5个记录需要添加这些属性，但它仍然比以前增加了大约两倍的时间。

Answer 1

尝试这样做的问题是，嵌套的编译很慢（轻描淡写），尤其是当您在谈论数千个时。这不是要走的路。

我可以看到有些人可能会在哪里考虑这个丑陋，并且根据您的需求，该解决方案可能 not 对您有用，但是使用属性，它的确很快地编译了所有内容。我最终建立了一个编译器指令，该指令将基于数据集生成标记，如果isTrue为TRUE，则添加必要的属性，然后对整个内容进行编译一次。丑陋的部分是它不会产生绑定。因此，如果您需要更改某些内容或更新某些内容，则必须重新编译整体。

目前正在运行约200-300ms，可以用数据集中的2000个项目编译整个内容。

plunker

指令：

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

，因为我不删除指令，因此它会一遍又一遍地使角度编译元素。因此，我需要删除指令或设置公寓以确定是否有必要再次编译。

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