javascript - AngularJS 过滤器导致 IE8 无法渲染双向绑定(bind)

Question

我在使用 IE8 时遇到一个奇怪的问题，如果我尝试通过 AngularJS 的双向数据绑定(bind)在模板中渲染 $scope 变量，它不会替换 {{child. name}} 具有正确的值。这肯定与以下过滤器的低效率有关:

  filter('truncate', function() {
    return function(name) {
      // It's just easier to use jQuery here
      var windowWidth = $(window).width(),
          nameElement = $('a:contains("' + name + '")'),
          truncPnt = Math.floor(name.length * 0.9);

      while (nameElement.width() > windowWidth * 0.75 && truncPnt > 6) {

        truncPnt = Math.floor(truncPnt * 0.9);
        name = name.substring(0, truncPnt);
        nameElement.text(name + ' ...');
      }
      return name;
    }
  });

然后我将此过滤器与 ng-repeat 一起使用:

<a class="entity-name" href="{{child.url}}" title="{{child.name}}" ng-cloak>{{child.name|truncate}}</a>

总体目标是根据屏幕的宽度将传递到过滤器的变量 chop ，并将任何 chop 的字符替换为“...”。我相当有信心这个过滤器是原因，因为我有一个类似的函数，它在 $(window) 处理程序的 .resize() 上被调用，并且如果我如果使用 IE8，并调整浏览器窗口的大小，它会导致 {{child.name}} 呈现为正确的值，但前提是我调整浏览器的大小。

更新:

<小时/>

所以我摆脱了上面的过滤器，并用一个非常相似的指令替换它。这是我第一次尝试创建自定义指令，因此我相当确定它可以做得更好，减去我目前似乎无法解决的明显缺陷。该指令如下:

.directive('truncate', function() {

  return {
    restrict: 'A',
    replace: true,
    template: '<a class="entity-name" href="{{child.url}}" title="{{child.name}}">{{child.display}}</a>',
    link: function(scope, element, attr) {
      var widthThreshold = $(element[0]).parent().parent().width() * 0.85;

      scope.$watch('child', function(val) {
        var elementWidth = $(element[0]).width(),
            characterCount = scope.child.name.length;

        while ($(element[0]).width() > widthThreshold || characterCount > 5) {
          characterCount--;
          scope.child.display = scope.child.name.substring(0, characterCount) + ' ...';
        }
      });
    }
  }
});

我将部分内容替换为简单的:

<a truncate="child"></a>

与过滤器相比，其差异如下(减去明显的过滤器与指令):

1. 将 windowWidth 替换为 widthThreshold，通过链接 jQuery 的 .parent() 两次来识别该值(本质上，在获取父 (x2) 元素的宽度而不是窗口的宽度)。
2. 向 child 添加了一个名为 display 的附加键。这将是用于显示的 child.name 的 chop 版本，而不是使用 jQuery 的 .text() 并仅使用 chop 的 child.name 进行渲染。
3. truncPnt 变为 characterCount (尽量记住不要缩写变量)

现在的问题是 jQuery 卡住了浏览器，直到我终止 javascript(如果出现提示)。 Firefox 可能会显示它，Chrome 还没有挂起，虽然我还没有在 IE 中进行测试，但我想象比前者更糟糕。

如何才能正确获取相关主元素上方两个父级的值，并 chop child.display 以便它不会环绕/延伸超过父级 div？

更新2:

<小时/>

我决定放弃主要基于 DOM 的计算的想法，转而使用数学，考虑父 div 的宽度、字体大小以及天知道是什么的比例。我认真地研究了一个公式，直到得到无论字体大小如何都能始终给出相似结果的公式。媒体查询确实会影响相关字符串的字体大小 CSS，因此我需要考虑到这一点，否则不同字体大小之间的 chop 字符串的长度会有一些巨大差异:

.directive('truncate', function() {
  return {
    restrict: 'A',
    replace: true,
    // {{child.display}} will be a truncated copy of child.name
    template: '<a class="entity-name" href="{{child.url}}" title="{{child.name}}">{{child.display}}</a>',
    link: function(scope, element, attr) {
      var widthThreshold = $(element).parent().parent().width() * 0.85,
          // get the font-size without the 'px' at the end, what with media queries effecting font
          fontSize = $(element).css('font-size').substring(0, $(element).css('font-size').lastIndexOf('px')),
          // ... Don't ask...
          sizeRatio = 29760/20621,
          characterCount = Math.floor((widthThreshold / fontSize) * sizeRatio);

      scope.$watch('child', function(val) {
        // Truncate it and trim any possible trailing white-space
        var truncatedName = scope.child.name.substring(0, characterCount).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        // Make sure characterCount isn't > the current length when accounting for the '...'
        if (characterCount < scope.child.name.length + 3) {
          scope.child.display = truncatedName + '...';
        }
      });
    }
  }
});

有趣的是，我相信我又回到了 Brandon Tilley 关于修改 DOM 与修改作用域中的属性的评论。现在我已经将其更改为修改属性，它可能会更好地在过滤器中使用？是否应在过滤器和指令中处理此类操作的决定因素通常是什么？

Answer 1

我引用文档:

指令

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

http://docs.angularjs.org/guide/directive

过滤器

Angular filters format data for display to the user. In addition to formatting data, filters can also modify the DOM. This allows filters to handle tasks such as conditionally applying CSS styles to filtered output.

http://docs.angularjs.org/guide/dev_guide.templates.filters

我使用过滤器仅用于更改数据格式，仅此而已。老实说，我相信使用过滤器来达到您的目的是合适的。正如文档所说，过滤器可以修改 DOM，我根本不明白为什么你应该使用指令，过滤器似乎就是你正在寻找的东西。 (除了错误可能会迫使您使用指令这一事实之外)