AngularJS - 在ng-bind-html之后运行自定义指令

时间:2015-03-04 14:33:20

标签: javascript html angularjs angularjs-directive

我想在ng-bind-html创建的DOM上运行自定义指令。

基本上我要自定义html标签<a>的行为,因为加载的html是不安全的,当用户点击链接时我会在发生任何事情之前执行某些功能,也就是{ {1}} jqLit​​e事件。

所以我原来的ideia是创建一个指令,修改我放置指令属性的容器内任何click的行为。

这很好用,直到我与<a>结合,我的指令在ng-bind-html将字符串编译成html并附加到DOM之前运行。

那么,是否可以在ng-bind-html运行后运行我的自定义指令?

1 个答案:

答案 0 :(得分:2)

DEMO

HTML:

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

控制器:

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

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

指令:

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());
                });           
            }
        };      
    });

使用priority property inside指令在mg-bind

之后运行代码