在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/

这里是代码：

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

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

改良版

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

新工作小提琴：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',tAttrs) {
            tAttrs.ngBind += '|decode';
        }
    };
});

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