AngularJS NG绑定HTML的渲染不列表标签
问题描述:
我有一个简单的HTML文档,就像...AngularJS NG绑定HTML的渲染不列表标签
<ol>
<li><strong>Test 1</strong></li>
<li><strong>Test 2</strong></li>
</ol>
...我想将其绑定到与ng-bind-html
一个div
,但HTML标签<ol>
(或<li>
)未呈现。
结果我是:
<strong>Test 1</strong>
<strong>Test 2</strong>
任何想法?
答
* {
padding: 0;
margin: 0;
}
ol li {
list-style: none;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="myText"></div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "<ol><li><strong>Test 1</strong></li><li><strong>Test 2</strong></li></ol>";
});
</script>
</body>
</html>
ng-bind-html
指令做这一切。欲了解更多信息,请访问:https://docs.angularjs.org/api/ng/directive/ngBindHtml
答
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-bind-html="trustedHtml"></span>
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",["$scope","$sce", function($scope,$sce) {
$scope.html = '<ol><li><strong>Test 1</strong></li><li><strong>Test 2</strong></li></ol>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
}]);
</script>
</body>
</html>
答
为了使用NG绑定,HTML,你需要包括ngSanitize在您的应用程序声明
你可以发布你的CSS文件? – 2017-09-26 11:59:13