ng-bind-html not working inside ui-view

Question

I am developing an angular app with angular 1.4 and ui.router 0.2.8. I am using ng-bind-html to print error messages while form validation.But it is not working. In my controller

$scope.nameError = $sce.trustAsHtml("<p class='form-error'>Please enter your full name</p>");

In my html page ,inside

<span ng-bind-html="nameError"></span>

Showing no errors.How can I solve this issue and thanks in advance?

Felix Too · Accepted Answer · 2017-03-20 13:18:55Z

1

Do you have 'ngSanitize' set up in your application? Like:

   var app = angular.module('app', ['ngSanitize']);
    app.controller('myController', function($scope, $sce) {
    $scope.nameError = $sce.trustAsHtml("<p class='form-error'>
Please enter your full name</p>"); 
    });

You can try this reference:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>

answered Mar 20, 2017 at 13:18

Felix Too

12k5 gold badges27 silver badges25 bronze badges

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

1 Comment

Rahul K R Over a year ago

Thanks for all answers.@Und3rTow- Its working. But where is your answer to upvote

Sachila Ranawaka · Accepted Answer · 2017-03-20 13:10:43Z

0

either you can create a filter like @Und3rTow mentioned or you can create a function to convert it

$scope.trustFunc = function(nameError){
     return $sce.trustAsHtml("<p class='form-error'>Please enter your full name</p>");
}

<span ng-bind-html="trustFunc(nameError)"></span>

angular.module("app",[])
.controller("ctrl",function($scope,$sce){
  
$scope.trustFunc = function(nameError){
 return $sce.trustAsHtml("<p class='form-error'>Please enter your full name</p>");
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <span ng-bind-html="trustFunc(nameError)"></span>
</div>

answered Mar 20, 2017 at 13:10

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

ng-bind-html not working inside ui-view

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related