【问题标题】:Printing html data loaded from database in angular js打印从 Angular js 中的数据库加载的 html 数据
【发布时间】:2016-08-12 13:38:05
【问题描述】:

我有一个从数据库加载的 JSON 对象数组。每个具有html内容的对象中都有一个特定的键。

我想在我的视图中显示这些内容以及所有其他内容。我使用了 ng-html-bind,因为我的控制器中有 $sce 依赖项。如果我在那里放一个字符串,比如<h1>Trusted html</h1>,它就可以工作。但不适用于我的内容。

我真正想要的是,如果我将$scope.htmlContent = $sce.trustAsHtml(data.content); 之类的内容放入它应该可以工作并在我认为它们所属的地方一一循环所有这些内容。但它不起作用。

我还制作了另一个数组,单独推送所有这些内容,但是当我通过$sce.trustAsHtml(trustMe); 传递它们时出现问题。

-----------------------------------编辑----------- ------------------------------

这些是我的对象:

[Object, Object, Object, Object, Object, Object, Object, Object, Object]

:
Object
8
:
Object
$$hashKey
:
"object:22"
content
:
"<h2>Test data.</h2>
↵"
created_at
:
"2016-08-12 14:12:35"
id
:
9
name
:
"Test"
points
:
4
semester
:
"Eagle Nest"
semester_id
:
6
status
:
0
subject
:
"Android"
subject_id
:
6
updated_at
:
"2016-08-12 14:12:35"
user_id
:
1
__proto__
:

我的观点

<div class="panel panel-default" ng-repeat="quiz in quizzes">
              <div class="panel-body">
                @ quiz.semester @ <span class="pull-right">Subject: @ quiz.subject @ </span>
                <hr class="blur-line">
                <p class="list-group-item-text list-item">
                <i class="fa fa-long-arrow-right"></i>  @ quiz.name @
                </p>
                <p class="details" ng-bind-html="MytrustedHtml"></p>

              </div>
            </div>

控制器

$scope.MytrustedHtml = $sce.trustAsHtml(data.content);

【问题讨论】:

  • 您有什么理由不在您的商品上使用ng-repeat?这是我通常如何做的一个例子:jsfiddle.net/ahmadabdul3/hp8sbzwf/25
  • 你能分享一下代码吗? Jsfiddle 会很棒
  • 这是一个 JSON 对象数组,还是一个对象数组?此外,ng-html-bind 不存在,ng-bind-html 存在。
  • 请添加一个要点或小提琴,另一方面,该对象应分配给范围键,以便您的应用程序可以使用它,然后如@duxfox 所述使用 ng-重复结构。种类 $scope.data 然后在你的 html
  • {{object.somekey}}
  • 您应该在问题中提供更多详细信息...
  • 标签: javascript angularjs ng-bind-html


    【解决方案1】:

    过滤器可能是管理此问题的更好方法。

    .filter('rawHtml', ["$sce", function($sce) {
        return function(input) {
            return $sce.trustAsHtml(input);
        };
    }]);
    

    在标记中

    <p ng-bind-html="MytrustedHtml | rawHtml"></p>
    

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签