ng-bind-html

by Mohamed Rias

HTML

<script src="https://code.angularjs.org/1.2.1/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
   <div ng-bind-html="someUnsafeHtml" my-directive></div>
</div>

JavaScript

angular.module('myApp', ['ngSanitize']);

angular.module('myApp').controller('myCtrl', function($scope) {   
    $scope.someUnsafeHtml="<a href='http://google.com/'>Click me!</a><hr><a href='http://stackoverflow.com'>Click me too!</a><input  type='text' value='test'/>";
});
                                   
angular.module('myApp').directive('myDirective', function() { 
    return {
        link: function(scope,element,attrs) {
            scope.$watch(attrs.ngBindHtml, function(newvalue) {
                
                element.find('a').on('click', function(event) {
                    //Run customize funcions for the click of a unsafe link...
                    event.preventDefault();
                    alert('Href: ' + event.target.attributes.href.value);
                });   
            });               
        }
    };      
});