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的渲染不列表標籤

回答

相關問題