Angularjs: Html render as text

Question

I have an Angularjs script to create a navigation Bar using users parameters. The problem is that, when i try to render the html structure, it always displays as plain text

This is the script:

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;
}

This is the template:

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

I tried a directive (otc-navbar) and ng-bind, but in both cases i get plain text instead of html. How can I make it work? Thanks in advance!

check your console for javascript errors

Avi
– Avi

2015-11-26 16:33:33 +00:00
Commented Nov 26, 2015 at 16:33 — Avi
– Avi, Commented Nov 26, 2015 at 16:33

Shyju · Accepted Answer · 2015-12-01 15:41:15Z

1

Use ng-bind-html with angular sanitize

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

ng-bind-html will evaluates your expression and inserts the resulting HTML into the element. By default, the resulting HTML content will be sanitized using the $sanitize service. In order to use ngSanitize, you need to include "angular-sanitize.js" in your application.

So include angular-sanitize.js in your page and inject the dependency to your angular module.

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

Here is a working sample on jsbin. :)

EDIT : As per the comment you wish ng-sanitize to not strip out the html attributes.

By default, ng-sanitize strips certain attributes out. If you really want that to not happen, You can use the $sce service's trustAsHtml method to explicitly tell angular that the markup you are passing is safe.

Here is a working sample

edited Dec 1, 2015 at 15:41

answered Nov 26, 2015 at 16:30

Shyju

220k106 gold badges420 silver badges498 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MatCat Over a year ago

Thanks a lot! It's working now. But apparently ngSanitize strips most of attributes (including id).

Shyju Over a year ago

@MatCat : that is the default behavior. If you don't want that behavior, you need to tell angular that whatever you are passing is safe html. See my updated answer.

Collectives™ on Stack Overflow

Angularjs: Html render as text

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related