Javascript AngularJS过滤器导致IE8不呈现双向绑定

我对IE8有一个奇怪的问题，如果我试图通过AngularJS的双向数据绑定在模板中呈现

$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>

我将部分替换为：

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

---

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

我参考了文档：

指令

指令是教授HTML新技巧的一种方法。在DOM编译期间，将根据HTML匹配并执行指令。这允许指令注册行为或转换DOM

过滤器

角度过滤器格式化数据以显示给用户。除了格式化数据，过滤器还可以修改DOM。这允许过滤器处理任务，例如有条件地将CSS样式应用于过滤输出

---

我使用过滤器只是为了改变数据的格式，而不是别的。老实说，我相信为您的目的使用过滤器是合适的。正如文档中所说，过滤器可以修改DOM，我看不出你为什么要使用指令，过滤器似乎就是你想要的。（除了bug可能会迫使您使用指令之外）

我参考了文档：

指令

指令是教授HTML新技巧的一种方法。在DOM编译期间，将根据HTML匹配并执行指令。这允许指令注册行为或转换DOM

过滤器

角度过滤器格式化数据以显示给用户。除了格式化数据，过滤器还可以修改DOM。这允许过滤器处理任务，例如有条件地将CSS样式应用于过滤输出

---

我使用过滤器只是为了改变数据的格式，而不是别的。老实说，我相信为您的目的使用过滤器是合适的。正如文档中所说，过滤器可以修改DOM，我看不出你为什么要使用指令，过滤器似乎就是你想要的。（除了一个bug可能会迫使您使用一个指令之外）

因为您直接操作DOM（

namelement.text

），并且没有实际返回一个新的值来在文本中使用，所以我认为这应该是一个指令。是的，它看起来确实很粗糙。我不熟悉AngularJS中的指令。我会去做研究的。”//…别问…sizeRatio=29760/20621，“。。英雄联盟由于您直接操作DOM（

namelement.text

），而不是实际返回一个新的值以在文本中使用，因此我认为这应该是一个指令。是的，它看起来确实很粗糙。我不熟悉AngularJS中的指令。我会去做研究的。”//…别问…sizeRatio=29760/20621，“。。英雄联盟大约一个月前，我在dev_guide.templates.filters页面上添加了以下评论：“我认为应该删除此文本‘过滤器还可以修改DOM。这允许过滤器处理任务，例如有条件地将CSS样式应用于过滤输出。’我认为过滤器不再这样做了（它们过去经常这样做，请参阅）。”@MarkRajcok可能是这样，但由于某些原因，没有为我显示讨论，我只是引用了文档；）我也不明白为什么过滤器不应该做任何DOM操作？如果我看这个（）例子；难道它不需要以某种方式操纵DOM吗？是的，这是个问题。。。我经常需要重新加载页面才能加载评论。angular.filter的0.9文档表示，编码人员可以在方法内部使用以下内容：“this.$element-包含绑定的DOM元素。$element变量允许筛选器操作DOM。”然后示例显示“this.$element.css（'color'，color）；”。现在，这种操作是在指令中完成的，而不是在过滤器中。过滤器现在只做3件事：1）格式化数据/输出2）选择数据的子集3）排序。在我看来，这些都不是真正的DOM操作。@MarkRajcok选择数据的子集正是Scott想要做的，所以他应该选择一个过滤器，对吗？我认为这已经包括了DOM操作，例如更改DOM元素的值（innerHTML（）是DOM的一部分，对吗？）。不过，您没有更改DOMs结构，这是肯定的：）嗯，子集部分听起来确实与过滤器很匹配，但“确定父元素的宽度”部分没有。这就是我没有尝试回答这个问题的原因之一：）关于innerHTML（），我倾向于这样看待它：过滤器格式化/子集/排序数据，本质上只有元素的文本作为过滤器的结果被改变。当安圭拉人谈论“DOM操纵”时，我的印象是这种操纵被排除在外。DOM结构更改（如您所述）或类似于DOM遍历或操作的jQuery似乎符合条件。大约一个月前，我在dev_guide.templates.filters页面中添加了以下注释：“我认为应该删除此文本”过滤器也可以修改DOM。这允许过滤器处理诸如有条件地将CSS样式应用于过滤输出之类的任务。“我认为过滤器不再这样做了（他们以前是这样做的，请参阅）。@MarkRajcok可能是这样，但由于某些原因，没有为我显示讨论，我只是引用了文档；）我也不明白为什么过滤器不应该执行任何DOM操作

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

.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 + '...';
        }
      });
    }
  }
});