AngularJS limitTo 使用 HTML 标签

Question

我在 AngularJS 中有一些绑定(bind)，我想限制显示的字符长度。当您只有简单的文本内容时，这是一个非常简单的问题。

但是，我有包含 HTML 标签的文本:

$scope.text = "<span><h1>Example</h1><p>Special Text</p></span>"

还有

$scope.maxNumberOfChar = 10;

当我使用以下行时，它会考虑 HTML 标记来计算字符数。

哪个可能是解决此问题的最佳解决方案并仅计算字符数，丢弃 HTML 标签？

提前致谢

Answer 1

我使用简单的过滤器和正则表达式操作创建了一个解决方案。

var appFilters = angular.module('myApp.filters', [])
.filter('limitHtml', function() {
    return function(text, limit) {

        var changedString = String(text).replace(/<[^>]+>/gm, '');
        var length = changedString.length;

        return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString; 
    }
})

以及对应的用法，类似于limitTo过滤器

<span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>

请注意，在本例中，我还使用了特定于我的解决方案的 html 绑定(bind)。