Unable to remove element in angular directive

Question

I have written following code snippet for an authentication directive:

angular.module('authDirective',[]).directive('hiAccess', ['authService', function(authService){
    return{
        restrict: 'A',
        compile:  function(element, attr){

            var userRole = authService.getUserRole();

            var allowedAccess = attr.hiAccess.split(" ");

            outerLoop: for(access in allowedAccess){
                for(role in userRole){
                    if(access == role) {
                        /*angular.forEach(element.children(), function(child){
                            //child.remove();
                        });*/
                        element.remove();
                        break outerLoop;
                    }
                }
            }

        }
    }
}]);

But I am getting following error in browser because of element.remove():

TypeError: Cannot read property 'childNodes' of undefined

Any suggestions ?

Answer 1

我在指令中使用了链接功能，而不是在编译时使用它，现在看来工作正常。

Answer 2

u can try

function removeElement(elem, wait) {
     ripples.splice(ripples.indexOf(elem), 1);
     if (ripples.length === 0) {
         getRippleContainer().css({ backgroundColor: '' });
     }
     $timeout(function () {
         elem.remove();
     }, wait, false);
 }