Question

我正在尝试插入一个包含模板中某些标记的字符串。

在控制器中：
$scope.message = "Hello moto <a ui-sref='home.test'>click</a>";

模板：

<div ng-bind-html="message.text"></div>

呈现为：

<div ng-bind-html="message.text" <div="" class="ng-binding">Hello moto <a>click</a></div>

尝试使用以下过滤器也无济于事;对于任何一个评论选择，文本都是简单的转义：

angular.module('test-filters', ['ngSanitize'])
    .filter('safe', function($sce) {
            return function(val) {
                return $sce.trustAsHtml(val);
                //return $sce.trustAsUrl(val);
                //return $sce.trustAsResourceUrl(val);
            };
    });

如何在不转义字符串的情况下插入字符串，也不删除属性？

编辑：Plunker http://plnkr.co/edit/H4O16KgS0mWtpGRvW1Es?p=preview（更新了sylwester的版本，引用了ngSanitize

Answer 1

让我们看一下http://jsbin.com/faxopipe/1/edit现在就排序了。它没有用，因为标签'ui-sref'中有另一个指令，所以你必须使用$ sce服务。

请在你的js中添加方法：

 $scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);

并在视野中：

<p ng-bind-html="to_trusted(message)"></p>

Answer 2

在使用ui.router路径的场景中，您必须将 $ compile 与 $ sce 结合使用才能生成动态HTML，以便 ui- sref 正常工作。如果你不这样做，你只会看到一个实际上不起作用的链接。

例如<span> Hello moto <a ui-sref='home.test'> Link </a> </span>

//You must need to add boundary conditions, this is just for demonstration
$scope.to_trusted = function(someHTML) {
    var compiledVal = $compile(someHTML)($scope);
    var compiledHTML = compiledVal[0].outerHTML;
    return $sce.trustAsHtml(compiledHTML);
}

你这样使用，

<p ng-bind-html="to_trusted(message)"></p>

请注意您的邮件必须是从"<"开始的有效HTML，因此如果您将非HTML传递给$ compile，您将获得 jqlite 错误。我用<span>来处理你的案子。

Answer 3

你错过了对angular-sanitize.js的引用，你也将它注入angular.app

var app = angular.module('plunker', ['ngSanitize']);

绑定html的最简单选项是 ng-bind-html ：

<li>link ng-html-bind <div ng-bind-html="message"></div></li>

请参阅Plunkr

ng-bind-html剥离元素属性

3 个答案: