javascript - 带有 css 的 ng-bind-html html 不起作用

Question

<ion-item ng-bind-html="renderHtml(word[key])">

</ion-item>

word[key] 在哪里

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

CSS:

ul {padding: 1px 10px 1px 20px;list-style-type: upper-roman;}

我的 CSS 结构要复杂得多。 CSS 在 cordova 上工作并使用react，但由于我将功能移植到 ng，所以 css 不起作用。请告知或指出我在这里遗漏的内容。

Answer 1

您看到了 Angular XSS 安全性在发挥作用(参见 http://errors.angularjs.org/1.2.23/$sce/unsafe )。

有两种方法可以解决这个问题:

1. 如果 html 是用户创建的/以某种方式受到影响，您将需要包含 $sanitize 模块。请参阅上面的链接。

2. 如果 html 仅来自您，请使用 $sce.trustAsHtml 将其标记为受信任的 HTML。类似于:

angular.module('myapp', []).controller('myctrl', function($scope, $sce) {
  $scope.renderHtml = function(html) {
    return html;
  };
  $scope.word = $sce.trustAsHtml('\
<ul>\
  <li>item 1</li>\
  <li> item 2 </li>\
  <li>item 3</li>\
</ul>');
});

ul {padding: 1px 10px 1px 20px;list-style-type: upper-roman;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <ion-item ng-bind-html="word"></ion-item>
</div>