如何在链接函数中向元素添加指令属性？

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

尝试这样做的问题是嵌套编译很慢（轻描淡写），特别是当你谈论成千上万的时候。这不是要走的路。

我可以看到一些人可能会认为这个丑陋，并且根据您的需要，这个解决方案可能不适合您，但它确实可以很快地编译所有内容，并应用了属性。我最终构建了一个编译器指令，它将根据数据集生成标记，如果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);
            }
        }
    };
};