AngularJS指令修改ng-bind和添加省略号

Question

我已经制作了一个AngularJS指令，用于向overflow：hidden文本添加省略号。它似乎不适用于Firefox，我不相信我已经尽可能地构建它。流程是：

1. 将指令属性添加到HTML元素
2. 指令将ng-bind属性读入范围
3. 指令监视链接功能中对ng-bind的更改
4. 在ng-bind更改时，指令执行一些花哨的计算以确定应该拆分文本的位置和添加省略号（我这里没有包含此代码，只是假设它有效）
5. 指令将元素的HTML设置为等于此新字符串，而不是触及ng-bind

HTML

<p data-ng-bind="articleText" data-add-ellipsis></p>

指令

app.directive('addEllipsis', function(){
    return {
        restrict    : 'A',
        scope       : {
            ngBind    : '='  // Full-length original string
        },
        link        : function(scope, element, attrs){
            var newValue;

            scope.$watch('ngBind', function () {
                /*
                 *  CODE REMOVED - Build shortened string and set to: newText
                 */

                 element.html(newText);  // - Does not work in Firefox and is probably not best practice
            });
        }
    };
});

有问题的一行是指令中的最后一行：

 element.html(newText)

我假设应该使用一些模板式方法？我不清楚如何最好地接近答案。谢谢你的帮助。

Answer 1

您可以使用filter代替。像这样：

过滤

app.filter('addEllipsis', function () {
    return function (input, scope) {
        if (input) {
            // Replace this with the real implementation
            return input.substring(0, 5) + '...';  
        }
    }
});

<强> HTML

<p data-ng-bind="articleText | addEllipsis"></p>

Answer 2

如果您将data-ng-bind="articleText"替换为ng-model="articleText"，则它应该适用于Chrome和Firefox。我不知道为什么，也许这是一个错误？但这是一个快速解决方案。

如果您对这种差异感兴趣，可以查看此post。但是在不同的浏览器中行为不同确实有点奇怪。