Menu
Following is my Code Example, if i removed ng-bind-html then the div is working, if not it fails, please suggest me an answer
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('CartController', function($scope) {
$scope.title = "<p>hello world</p>";
$scope.test = "How are you..!How are you..!How are you..!";
});
</script>
<body ng-app="myApp" >
<div ng-controller="CartController">
<label ng-bind-html=title>
<div>{{test}}</div>
</label>
</div>
</body>
</html>
290
asked Dec 02 '25 09:12
You need to use $sce.trustAsHtml injecting $sce into the controller:
JSFiddle
app.controller('CartController', function($scope, $sce) {
$scope.title = $sce.trustAsHtml("<p>hello world</p>");
$scope.test = "How are you..!How are you..!How are you..!";
});
Of course the HTML label will be completely replaced by $scope.title and you aren't able to see {{test}} anymore
135
When u use ng-bind-html to the <label> it completely replaced by the $scope variable, so u cannot achieve the <div> inside the <label> tag if the label contains ng-bind-html directive
<label ng-bind-html='<p>hello world</p>'> Label1 <div>text1</div> </label>
In the above Html, Only the html "hello world" will be displayed along with text1, anyway it is not advisable until it requires..!
23
answered Dec 05 '25 03:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
