How do I use ng-bind-html?
Any ideas why this binding isn't working?
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.myHTML = "<a href='#'>a link</a>";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
<p ng-bind-html="myHTML"></p>
</div>
+3
source to share
1 answer
To bind HTML to work, your module must have ngSanitize
as well as a angular-sanitize(.min).js
.
var myApp = angular.module('myApp',['ngSanitize']);
function MyCtrl($scope) {
$scope.myHTML = "<a href='#'>a link</a>";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<p ng-bind-html="myHTML"></p>
</div>
Or you can use String Contextual Escaping (which will probably beto do this in future versions of Angular).
+5
source to share