逃离＆安培; ＆GT;在AngularJs NG绑定人物 [英] Escaping & > characters in ng-bind in AngularJs

问题描述

我有一个用例，在这里我们可以有'和;'在一个字符串和>字符。例如。强放大器;约翰逊，价值＆GT; 3 。因此，尽管从服务器的响应是EN codeD，因此值变为'值＆ampgt; 3。

I have a use case, where we can have '&' and '>' characters in a string. eg. Johnson & Johnson, value > 3. So while the response from server is encoded, hence the value becomes 'value > 3'.

NG-绑定不支持以下内容：

价值和放大器; GT; 3 将呈现为 ngBind ，而浏览器呈现相同的内容价值＆GT; 3 。

value > 3 will be rendered for ngBind, whereas the browser renders the same content as 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-绑定 present？我不想使用 NG-绑定-HTML （与价值问题＆LT; ，这是不是一个HTML）或 NG-绑定不安全-HTML 。

Why is this default browser behavior not present in ng-bind?. I don't want to use ng-bind-html (has issues with value < and it is not a html) or ng-bind-unsafe-html.

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

My application has dynamic key-value fields which will be displayed in different parts of the application. So it will require additional overhead to use a separate directive or decorator to display all string fields than to use ngBind.

问题：

1）是否有做同样无需使用额外的指令的任何其他方式，或者这是处理连接codeD数据？

1) Is there any other way of doing the same without using an additional directive, or is this the right way of handling encoded data?

2）我可以覆盖 NG-绑定的行为或默认装饰呢？

2) Can I override the behavior of ng-bind or decorate it by default?

推荐答案

修改：请，直奔答案，以获得最佳版本的底部;答案是在时间顺序;我得到了最佳code经过几次反复，到了最后。谢谢你。

EDIT: please, go straight to the bottom of the answer to get the best version; the answer is at chronological order; I got the optimal code after a few iterations, at the end. Thank you.

• 我可以覆盖NG绑定的行为，或默认？装饰它

• Can I override the behaviour of ng-bind or decorate it by default ?

是的。我做了一个非常简单的实现，这使得 NG-绑定表现为你想要的。嗯......我不知道这是否是你想要什么，但至少它做什么，我知道你想要。

Yes. I've done a very simple implementation which makes ng-bind to behave as you want. Well... I'm not sure if this is exactly what you want, but at least it does what I've understood you want.

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

这里是code：

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绑定的行为的方式。它不添加一个新的指令，它只是扩展了存在的ngBind指令的行为。

This is not exactly an "additional directive" - this is the way to "override the behaviour of ng-bind". It does not add a new directive, it just extends behaviour of existent ngBind directive.

在编译的功能，我们修改 NG-绑定属性的值，包成一个函数调用。有了这一点，我们必须访问原始模型值，并有机会返回它修改。

At the compile function, we modify the value of the ng-bind attribute, wrapping it into a function call. With this, we have access to the original model value, and the opportunity to return it modified.

我们做出可以通过在pre-链接阶段范围的功能，因为如果我们这样做了后链接阶段，该功能将只提供在原ngBind指令已检索从属性值（这将是一个空字符串，因为函数西港岛线未找到）。

We make the function available through the scope in the pre-linking phase, because if we do this in the post-linking phase, the function will be available only after the original ngBind directive has retrieved the value from the attribute (which will be an empty string, because the function wil not be found).

的 myBind 功能简单和智能：它创建了一个元素，并使用文本 - 不变 - 作为元件主体，只有被立即通过检索文本功能 - 这将返回的内容，就像浏览器呈现它

The myBind function is simple and smart: it creates an element, and the text is used - unchanged - as the element body, only to be immediately retrieved through the text function - which will return the contents just as "the browser renders" it.

这样，您就可以使用ngBind像往常一样，像＆LT; D​​IV NG绑定=model.content/＆GT; ，但修改后的行为

This way, you can use ngBind as usual, like <div ng-bind="model.content" />, but have this modified behaviour.

而不是 myBind 函数附加到应用ngBind每一个范围，在每pre联阶段，我们只能一次将其附加到 $ rootScope ，使其立即可用于所有作用域。

Instead of attaching the myBind function to every scope where ngBind is applied, at every pre-linking phase, we can attach it only once to the $rootScope, making it immediately available for all scopes.

新的工作小提琴： http://jsfiddle.net/EUqP9/

新的code：

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 + ')';
        }
    };
}]);

大部分超过previous版本更清洁！当然，你可以改变 myBind 函数名称为任何你想要的其他名字。该功能的成本是这样的：已添加到根范围这个简单的功能 - 它是由你来决定，如果实在值得价格

Much cleaner than the previous version! Of course, you can change myBind function name to any other name you want. The "cost" of the feature is this: have this simple function added to the root scope - it is up to you to decide if it worths the price.

...为什么不从任何范围中删除功能，使它成为一个过滤器呢？它也可以。

Influenced by Chemiv's answer... why not remove the function from any scope and make it a filter instead? It also works.

然而，另一个新的工作小提琴： http://jsfiddle.net/hQJaZ/

Yet another new working fiddle: http://jsfiddle.net/hQJaZ/

和新的code：

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';
        }
    };
});

现在，你有三个选择从菜单中选择。

Now you have three options to choose from the menu.

这篇关于逃离＆安培; ＆GT;在AngularJs NG绑定人物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！