Angular.js：如何从指令获取渲染文本宽度？

Question

我需要（动态）在 ng-repeat 块中的固定长度按钮内渲染文本。 我想获得DOM渲染文本宽度（能够截断它，并添加省略号实体......） 这是我的HTML：

 <span ng-repeat="(key, item) in players" limit-text-length max-len="100">
    <div class="btn">
      <div id="player-{{key}}">{{item.name}}</div>
    </div>
 </span>

这是我目前的指示：

app.directive('limitTextLength', function() {
  return function(scope, element, attrs) {
  var maxLen = attrs.maxLen;
  var el = element.find​("[id^=player-]"); // <-- THIS DOESN'T WORK...
  if (el.width() > maxLen) { // check text is not too wide
    while (el.width() > maxLen) {
      var nameTruncated = el.html();
      nameTruncated = nameTruncated.substring(0, nameTruncated.length - 1);
      el.html(nameTruncated);
    }
    el.append('&hellip;');
  }
};

有什么建议吗？

Answer 1

element.find("[id^=player-]")在没有jQuery的情况下无法工作，因为Angular的jqLit​​e find() 仅限于按标记名称查找（根据的 the docs ）。

您可以使用原生querySelector()方法，该方法有 good support in browsers ：

//var el = element.find("[id^=player-]");
var el = angular.element(element[0].querySelector('[id^="player-"'));

<子> 当然，如果没有jQuery，.width()方法将无法使用，但如果你使用jQuery，你的选择器应该可以正常工作。

---

还有一个拼写错误：var maxLen = attrs.len;应为var maxLen = attrs.maxLen;

---

也就是说，主要的问题是元素的实际宽度是在渲染后确定的（在您检查时没有发生）。通过将相关代码包装在$timeout中，您可以确保在元素渲染后进行检查 您的指令可以像这样修改（假设包含jQuery）：

app.directive('limitTextLength', function ($timeout) {
    return function(scope, element, attrs) {
        var maxLen = attrs.maxLen;
        var el = element.find("[id^=player-]");
        $timeout(function () {
            if (el.width() > maxLen) { // check text is not too wide
                while (el.width() > maxLen) {
                    console.log(el.width());
                    var nameTruncated = el.html();
                    nameTruncated = nameTruncated.substring(0, nameTruncated.length - 1);
                    el.html(nameTruncated);
                }
                el.append('…');
            }
        });
    };
});

另请参阅此 short demo 。

---

BTW，如果只是省略号，你可以使用CSS3的 text-overflow 属性。