修改ng绑定和添加省略的AngularJS指令

Question

我做了一个AngularJS指令，添加一个省略号以溢出:隐藏文本。它似乎在Firefox中不起作用，而且我也不相信我已经尽可能地构造了它。流动情况如下：

1. 向HTML元素添加指令属性
2. 指令将ng-bind属性读入范围。
3. 指令监视在链接函数中对ng-bind的更改。
4. 对于ng-bind更改，指令会进行一些复杂的计算，以确定应该在什么地方拆分文本并添加省略号(我这里没有包含这段代码，只是假设它能工作)
5. 指令将元素的HTML设置为此新字符串，而不是接触ng-绑定。

<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

你可以用过滤器代替。就像这样：

滤波器

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

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

Answer 2

如果你用data-ng-bind="articleText"代替ng-model="articleText"，它应该在Chrome和火狐中都能工作。我不知道为什么，也许是虫子？但这是一个快速的解决办法。

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