逃逸& gt; AngularJs中ng-bind中的字符 [英] Escaping & > characters in ng-bind in AngularJs

问题描述

我有一个用例，在这里我们可以有'&'和字符串中的>"字符.例如.强生公司约翰逊，value > 3.因此，在对来自服务器的响应进行编码的同时，该值变为值& gt;". 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-bind不支持以下内容:

value > 3将针对ngBind呈现，而浏览器呈现与value > 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-bind中不存在?我不想使用ng-bind-html(具有值<且不是html的问题)或ng-bind-unsafe-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)是否有其他方法可以在不使用附加指令的情况下进行相同操作，或者这是处理编码数据的正确方法吗?

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-bind的行为还是默认对其进行修饰吗?

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

推荐答案

编辑:请直接进入答案的底部以获得最佳版本；答案是按时间顺序排列的；最后，经过几次迭代，我得到了最佳代码.谢谢.

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-bind的行为或默认装饰它?

是的.我做了一个非常简单的实现，使ng-bind表现为您想要的.好吧...我不确定这是否正是您想要的，但至少它能满足我的理解.

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/

这是代码:

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指令的行为.

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.

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

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.

我们在预链接阶段通过作用域使功能可用，因为如果在后链接阶段进行此操作，则仅在之后检索到原始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函数简单而智能:它创建一个元素，并且使用文本(未更改)作为元素主体，仅可通过text函数立即检索-该文本将像返回内容一样浏览器呈现"它.

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.

这样，您可以像<div ng-bind="model.content" />一样照常使用ngBind，但是具有这种修改的行为.

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

我们没有将myBind函数附加到每个应用ngBind的范围，在每个预链接阶段，我们只能将其附加到$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/

新代码:

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函数名称更改为所需的任何其他名称. 成本"指的是成本".功能的特点是:将这个简单的功能添加到根范围中-由您决定是否值得这个价格.

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.

受Chemiv的答案影响...为什么不从任何作用域中删除该功能，而是使其成为过滤器?也可以.

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/

以及新代码:

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-bind中的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！