how to convert string value to html element using angular?

Question

I've tried bind a one page html to model window by angular HTTP call and ng-bind-html tag also included the ngSanitize js core. but It is working without HTML element.
My Code: HTML

<div class="myModels" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="true" ng-show="showModel">
    <div class="modal-dialog" role="document" ng-bind-html = "ModelContent"></div>
</div>

Controller

$scope.Login = function(path){
    $http.post('http:'+path).success(function(result){$scope.ModelContent = result;})
}

Render HTML:

<div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-model="">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Login</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-10">
                    <label>User Name</label>
                    <input type="text" name="username" maxlength="10" class="form-control" ng-model=""> 
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <label>Password</label>
                    <input type="password" name="password" maxlength="15" class="form-control" ng-model=""> 
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button name="SignIn" class="btn btn-success pull-right">Log in</button>
        </div>
    </div>

You can refer below image it doesn't showing HTML elements

Could you post the code?

Jack A.
– Jack A.

2015-09-20 18:08:34 +00:00
Commented Sep 20, 2015 at 18:08 — Jack A.
– Jack A., Commented Sep 20, 2015 at 18:08

Jack A. · Accepted Answer · 2015-09-25 12:17:13Z

1

From a quick look at the source for the $sanitize whitelist, it looks like input elements are not allowed by default.

You could add them to the whitelist, but in this case the HTML is coming from your server and I would expect it to be trustworthy. So the simplest solution would be to use $sce.trustAsHtml to allow all elements in your HTML.

To do that, you would change your Login function like so:

// Note that you'll need to inject $sce into your controller
$scope.Login = function(path){
    $http.post('http:'+path)
    .success(function(result) {
        $scope.ModelContent = $sce.trustAsHtml(result);
    });
}

answered Sep 25, 2015 at 12:17

Jack A.

4,5531 gold badge28 silver badges38 bronze badges

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

Comments

Jenson Raby · Accepted Answer · 2015-09-21 05:56:02Z

0

put this code in your controller controller.js

$rootScope.errorMessage = 'Account activated successfully, please <a href="/">Login</a> and other <em>stuff</em> with your username and password';

Also use this code in your html page

<h5 ng-bind-html="errorMessage"></h5>

answered Sep 21, 2015 at 5:56

Jenson Raby

7892 gold badges6 silver badges27 bronze badges

3 Comments

Mohanrajan Over a year ago

Already I've tried ng-bind-html and ng-bind template. It doesn't work

Jenson Raby Over a year ago

can you change $scope.ModelContent to $rootScope.ModelContent

Jenson Raby Over a year ago

this is a small example of bind html plnkr.co/edit/mziacJZj2rFwo5c4fRtO?p=preview

Collectives™ on Stack Overflow

how to convert string value to html element using angular?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related