在AngularJs中的ng-bind中的JavaScript – 转义和>字符

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的行为就像你想要的那样。嗯…我不知道这是否是你想要的，但至少它是我所理解的你想要的。

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

这里是代码：

@H_357_7@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指令从属性(将是空字符串，因为函数没有被找到)。

@H_394_1@myBind函数是简单而智能的：它创建一个元素，文本被使用 – 不变 – 作为元素体，只能通过文本函数立即检索 – 这将像“浏览器呈现”一样返回内容。

这样，您可以照常使用NgBind，例如< divng-bind =“model.content”/>，但具有此修改的行为。

改良版

我们可以在每个预连接阶段将myBind函数附加到每个应用了ngBind的范围，而不必将它附加到$ rootScope一次，使其立即可用于所有范围。

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

新代码：

@H_357_7@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/

和新的代码：

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

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