AngularJs中ng-bind中的转义&>字符

Question

我有一个用例，我们可以在字符串中包含'&‘和'>’字符。例如：强生，value > 3。因此，当来自服务器的响应被编码时，值就变成了'value > 3‘。

ng-bind不支持以下内容：

将为ngBind呈现value > 3，而浏览器呈现与value > 3相同的内容。

http://jsfiddle.net/HKahG/2/

Ng:bind <div ng-bind="model"></div> 
Ng:bind-html <div ng-bind-html="model"></div>
<div> From Div: value &gt; </div>

为什么ng-bind中不存在此默认浏览器行为？我不想使用ng-bind-html (值为<有问题，而且它不是html)或ng-bind-unsafe-html。

我的应用程序有动态键值字段，它们将显示在应用程序的不同部分。因此，与使用ngBind相比，使用单独的指令或装饰器来显示所有字符串字段需要额外的开销。

问题：

1)有没有其他方法可以在不使用额外指令的情况下执行相同的操作，或者这是处理编码数据的正确方法吗？

2)默认情况下，是否可以覆盖或修饰ng-bind的行为？

Answer 1

编辑：请直接转到答案的底部以获得最好的版本；答案是按时间顺序排列的；最后，我在几次迭代后获得了最优代码。谢谢。

默认情况下，

• Can I会覆盖ng-bind的行为或对其进行修饰

是。我做了一个非常简单的实现，让ng-bind像你想要的那样工作。好吧..。我不确定这是否是你想要的，但至少我知道你想要什么。

工作小提琴：http://jsfiddle.net/93QQM/

下面是代码：

module.directive('ngBind', function() {
    return {
        compile: function(tElement, tAttrs) {
            tAttrs.ngBind = 'myBind(' + tAttrs.ngBind + ')';
            return { 
                pre: function(scope) {
                    scope.myBind = function(text) {
                        return angular.element('<div>' + text + '</div>').text();
                    }
                }
            };
        }
    }
});

这不完全是“附加指令”--这是“覆盖ng-bind的行为”的方式。它没有添加新的指令，它只是扩展了现有ngBind指令的行为。

在编译函数中，我们修改了ng-bind属性的值，将其包装到一个函数调用中。这样，我们就可以访问原始模型的值，并有机会返回修改后的模型值。

我们在预链接阶段通过作用域使函数可用，因为如果我们在后链接阶段这样做，函数将只有在原始ngBind指令从属性中检索到值后才可用(这将是一个空字符串，因为找不到该函数)。

myBind函数简单而智能:它创建了一个元素，文本被用作元素主体，只是通过text函数立即被检索到，该函数将返回内容，就像“浏览器呈现”内容一样。

这样，您就可以像使用<div ng-bind="model.content" />一样使用ngBind，但需要修改行为。

改进的版本

在每个预链接阶段，我们只需将myBind函数附加到$rootScope一次，从而使其立即可用于所有作用域，而不是将它附加到应用ngBind的每个作用域。

新的工作工具：http://jsfiddle.net/EUqP9/

新代码：

module.directive('ngBind', ['$rootScope', function($rootScope) {
    $rootScope.myBind = function(text) {
        return angular.element('<div>' + text + '</div>').text();
    };
    return {
        compile: function(tElement, tAttrs) {
            tAttrs.ngBind = 'myBind(' + tAttrs.ngBind + ')';
        }
    };
}]);

比以前的版本干净多了！当然，您可以将myBind函数名称更改为您想要的任何其他名称。这个特性的“成本”是这样的:将这个简单的函数添加到根作用域-它是否值得这个价格由您决定。

还有另一个版本

受Chemiv答案的影响...为什么不从任何作用域中删除该函数，并将其改为过滤器？它也是有效的。

另一种新的工作方式：http://jsfiddle.net/hQJaZ/

和新的代码：

module.filter('decode', function() {
    return function(text) {
        return angular.element('<div>' + text + '</div>').text();
    };
}).directive('ngBind', function() {
    return {
        compile: function(tElement, tAttrs) {
            tAttrs.ngBind += '|decode';
        }
    };
});

现在，您可以从菜单中选择三个选项。

Answer 2

这是HTML：

>

它可能没有HTML标记，但它仍然是HTML。如果你想使用ng-bind，你的服务器需要返回未编码的文本。也就是说，用>代替>。

使用ng-bind-html或修改您的服务器以返回纯文本，而无需首先对其进行html编码。

编辑：快速演示，演示了如何在JavaScript中使用>和>：

div1.innerHTML = ">";  // write HTML
div2.textContent = ">";   // write plain text
console.log(div1.innerHTML === div2.innerHTML);
console.log(div1.textContent === div2.textContent);

http://jsfiddle.net/XhEcV/

Answer 3

ng-bind使用.text()方法替换文本，虽然您的代码包含>，但ng-bind不能正确呈现它。您应该在此位置使用ng-bind-html，因为您实际上是在输入HTML内容。否则，您可以将>替换为正则表达式为'>‘。

例如:- model = model.replace(/>/g, '>');

但是在这种情况下，您必须替换所有不需要的HTML标记，因为ng-bind-html在您的情况下已经可以很好地工作了。