AngularJS：HTML渲染为文本

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插入到元素中。 默认情况下，将使用$sanitize服务对生成的HTML内容进行清理。 为了使用ngSanitize ，您需要在应用程序中包括“ angular-sanitize.js ”。

因此，在页面中包含angular-sanitize.js并将依赖项注入您的angular模块。

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

这是jsbin上的工作示例。 :)

编辑：根据您希望ng-sanitize注释不剥离html属性的注释。

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

这是一个工作样本

AngularJS：HTML渲染为文本

问题描述

1 个解决方案

解决方案1
1 2015-11-26 16:30:52

AngularJS：HTML渲染为文本

问题描述

1 个解决方案

解决方案1 1 2015-11-26 16:30:52

解决方案1
1 2015-11-26 16:30:52