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>

任何想法？

来源

2017-09-26 BartB

你可以发布你的CSS文件？ – 2017-09-26 11:59:13

* { 
 
    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

来源

2017-09-26 12:00:01 anu

<!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>

来源

2017-09-26 12:36:08

为了使用NG绑定，HTML，你需要包括ngSanitize在您的应用程序声明

来源

2017-09-27 12:03:33 vill3

AngularJS NG绑定HTML的渲染不列表标签

回答

相关问题