使用$ compile的指令会导致浏览器内存错误

Question

使用此指令向元素添加一些弹出属性。问题是过度使用$compile导致浏览器不再响应或最大内存使用错误。我在1页上的大约50个元素上使用该指令。

问题

如何提高指令的性能？有没有其他方法来处理我的指令上的属性的创建和操作？

HTML

<span trim-to-tooltip="transaction.devicehash"></span>

指令

angular.module('app.xxx').directive('trimToTooltip', [
'$timeout', '$compile',
function ($timeout, $compile) {

return {
  link: link,
  restrict: 'AE'
};

function link($scope, $element, $attrs) {
  var maxLength = 18;
  var originalValue, trimmedValue;

  function _init() {
    $scope.$watch($attrs.trimToTooltip, function (v, o) {
      if (!o && v === o)
        return;
      originalValue = v;

      if (originalValue.length - 3 > maxLength) {
        trimmedValue = originalValue.substring(0, maxLength) + '...';

        if (!$element.attr('popover')) {
          $element.attr('popover', originalValue);
          $element.attr('popover-placement', 'top');
          $element.attr('popover-trigger', 'click');

          $compile($element)($scope);
        }
      } else {
        $element.removeAttr('popover');
        $element.removeAttr('popover-placement');
        $element.removeAttr('popover-trigger');

        $compile($element)($scope);
      }

      $element.text(trimmedValue);
    });
  }

  _init();
  }}]);

Answer 1

确保在编译元素之前删除trim-to-tooltip属性，否则你基本上会重新编译trimToTooltip指令，这会导致无限循环并导致麻烦：

$element.removeAttr('trim-to-tooltip');
$compile($element)($scope);

Answer 2

您可以使用以下模板制作指令：

<span ng-if="str.length > 18" popover=...>{{str | substr:18}}</span>
<span ng-if="str.length < 18">{{str}}</span>