Question

我正在使用ng-view加载我的angularjs网站上的部分内容。我一直在努力解决一个简单的功能，即从一个JSON文件中动态地添加html。出于某种原因，我无法将HTML呈现为HTML而不是字符串。

代码：app.js

app.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

在partial：job.html（ng-controller在div中包含此部分）

<div class="grid-block vertical padding-horizontal always-show">
   <div ng-bind-html="jobDescription.content | to_trusted"></div>
</div>

在控制器：job.js

$http.jsonp("http://example.com/jobDescription")
  .success(function(response){
     var job = response;
     // custom data operations
     // ...
     $scope.jobDescription = job;

});

JSON看起来像：

 { 
    "content": "&lt;div&gt;This is a job.&lt;/div&gt;"
 }

始终输出：

"<div>This is a job description</div>"

我发现其他人在部分内容中明确地遇到了这个问题。我见过使用$ viewContentLoaded和.upgradeAllRegistered（）;

有什么想法吗？

Answer 1

您可能正在运行并发问题。也许ngBindHtml在过滤运行之前绑定了值。

您可以使用priority调查此问题或者您可以使用指令而不是过滤器来处理以这种方式将DOM放入DOM中：

app.directive('toTrusted', ['$sce', function($sce){
    return {
        link: function ($scope) {
              $scope.htmlString = $sce.trustAsHtml(text);
        },
        template: "<div ng-bind-html="htmlString"></div>"
    };
}]);

并像这样使用它 -

<div class="grid-block vertical padding-horizontal always-show">
    <div to-trusted="jobDescription.content"></div>
</div>

ng-bind-html在partial内部不起作用

1 个答案: