Question

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

</ion-item>

单词[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并作出反应，但由于我将功能移植到ng，css不起作用。请告知或指出我在这里缺少的东西。

Answer 1

您正在看到角度XSS安全性（请参阅http://errors.angularjs.org/1.2.23/$sce/unsafe）。

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

如果html是以某种方式创建/影响的用户，则需要包含$sanitize模块。请参阅上面的链接。
如果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>

ng-bind-html html与css不起作用

1 个答案: