remove element from dom angular

Question

How to properly remove element in dom model using angular directive?

.directive('restrict', ['AuthService', function (authService) {
    return {
        restrict: 'A',
        prioriry: 100000,
        scope: false,
        link: function () {
            alert('1');
        },
        compile: function (element, attr, linker) {
            var accessDenied = true;
            var user = authService.getUser();
            var attributes = attr.access.split(" ");

            for (var i in attributes) {
                if (user.roles.indexOf(attributes[i]) > -1) {
                    accessDenied = false;
                }
            }

            if (accessDenied) {
                element.children().remove();
                element.remove();
            }
        }
    }

this code throw exception in last line:

TypeError: Cannot read property 'childNodes' of undefined

directive works well for td or li elements, but wrong for a or div or span

<span data-restrict access='EditUser' class="glyphicon glyphicon-trash" ng-click="deleteUser(u)"></span>

What happens if you just do element.remove() ? Without the previous line? — alexrogers, Sep 30 '14 at 14:21
Hmm that's quite an old version, note btw http://stackoverflow.com/questions/26121248/what-is-the-best-practice-for-dependency-injection-annotation-with-angularjs/26123376#26123376 — alexrogers, Sep 30 '14 at 14:32

score 0 · Answer 1 · answered Sep 30 '14 at 14:34

0

Rather than do this, you could go a different approach, you could add a controller which sets a flag (accessDenied) on the scope based on the same condition, then use ng-if on your directive, or first child element failing that.

answered Sep 30 '14 at 14:34

alexrogers

1,514
1
16
27

Can you show some code to explain what you mean exactly, please? – Uooo Apr 24 '15 at 06:24

remove element from dom angular

1 Answers1