AngularJS - run custom directive after ng-bind-html
I have a script that I want to run a custom directive in the DOM that ng-bind-html
creates.
Basically I have to tweak the behavior of the html tag <a>
, because the html being loaded is not safe and when the user clicks on the link, I have to execute some functions before anything happens, aka the click
jqLite event.
So my original ideia created a directive that changes the behavior of anyone <a>
inside the container that I put my directive's attribute into.
This works great until I merged with ng-bind-html
, my directive works until ng-bind-html
it compiles the string to html and attaches to the DOM.
So, is there any way to run my custom directive after launch ng-bind-html
?
source to share
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
source to share