Question

我有一个Angularjs脚本，可以使用用户参数创建导航栏。问题是，当我尝试渲染html结构时，它总是显示为纯文本

这是剧本：

var app = angular.module('userData', []);

app.controller('showUserData', ['$scope', function($scope){
    $scope.userPar = JSON.parse(sessionStorage.userPar);
    $scope.navBar = createNavBar($scope.userPar);

    $scope.logOut = function(){
        alert('Out you go!');
    }

}]);

app.directive("otcNavbar", function(){
    return {
       template:"{{navBar}}"
    };
});


function createNavBar(userPar){
    var navBar = "<ul id=\"nav\">";

    if(userPar.isDir == 1){
        navBar +=
        "<li class=\"seccion\"><a href=\"#\">Director</a></li>";        
    }

    if(userPar.isSys == 1){
        navBar +=
        "<li class=\"seccion\"><a href=\"#\">System</a></li>";
    }

    navBar +=
    "<li class=\"seccion\"><a href=\"\" ng-click=\"logOut()\">Log Out</a></li></ul>";


    return navBar;
}

这是模板：

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link id="css" rel="stylesheet" href="main.css" type="text/css" />
    <script src="angular.min.js"></script>
    <script src="mainApp.js"></script>
    </head>
    <body>
        <div id="userPar" ng-app="userData" ng-controller="showUserData">
            <table id="sessionData">'.
            <tr><th colspan="6">User Data</th></tr>'.
            <tr><td class="R B">User No.:</td><td class="L">{{userPar.suID}}</td>.
            <td class="R B">Name:</td><td class="L">{{userPar.sulName}}, {{userPar.sufName}}</td>.
            <td class="R B">Access:</td><td class="L">{{userPar.utName}}</td></tr>
            </table>

            <!--<div id="navBar" otc-navbar></div>-->
            <div id="navBar" ng-bind="navBar"></div>

            </div>


    </body>
</html>

我尝试了一个指令（otc-navbar）和ng-bind，但在这两种情况下我都得到纯文本而不是html。我怎样才能使它工作？提前谢谢！

Answer 1

将ng-bind-html与角度消毒

一起使用

<div id="navBar" ng-bind-html="navBar"></div>

ng-bind-html将评估您的表达式并将生成的HTML插入到元素中。默认情况下，生成的HTML内容将使用$sanitize服务进行清理。要使用ngSanitize，您需要在应用中添加“angular-sanitize.js”。

因此请在页面中包含angular-sanitize.js并将依赖项注入角度模块。

var app= angular.module('userData', ['ngSanitize']);

Here是jsbin的工作示例。：）

编辑：根据您希望对不删除html属性进行消毒的评论。

默认情况下，ng-sanitize会删除某些属性。如果您确实希望不会发生这种情况，可以使用$sce服务的trustAsHtml方法 明确告知角色 您传递的标记是安全

Here是一个工作样本

Angularjs：Html呈现为文本

1 个答案: