javascript - AngularJS - Run custom directive after ng-bind-html

Question

I've a scenario which I want to run a custom directive on the DOM that ng-bind-htmlcreate.

Basicly I've to customize the behavior of the html tag <a> because the html that is loading is unsafe and when the user click the link I've to execute some functions before anything happens, aka, the click event of jqLite.

So my original ideia was create a directive that modifies the behavior of any <a> inside the container that I put the attribute of my directive.

This works fine, until I combine with ng-bind-html, my directive runs before the ng-bind-html compile the string into html and attached to the DOM.

So, is any way to run my custom directive after the ng-bind-html run?

Answer 1

DEMO

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
       <div ng-bind="sometext" my-directive>before</div>
    </div>

Controller:

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

angular.module('myApp').controller('myCtrl', function($scope) {   
   $scope.sometext="stuff here";
});

Directive:

angular.module('myApp').directive('myDirective', function() { 
        return {
            priority: 10, // adjust this value ;)
            link: function(scope,element,attrs) {
                scope.$watch(attrs.ngBind, function(newvalue) {
                  console.log("element ",element.text());
                });           
            }
        };      
    });

Use priority property inside directive to run your code after mg-bind