removing the element via click in angularJS

Question

i am trying to remove an element using directive

i found a working example http://jsfiddle.net/qDhT9

and i tried to append a new element and having the thing as http://jsfiddle.net/qDhT9/140

var app = angular.module('myApp', []);
    app.directive('removeOnClick', function() {
        return {
            link: function(scope, elt, attrs) {
                scope.remove = function() {
                    alert('here');
                    elt.html('');
                };
                elt.append('<a href class="close" style="float:right;padding-right:0.3em" ng-click="remove()">&times;</a>');
            }
        }
    });

but this

one does not worked.

Why and how to make the second one work.

charlietfl · Accepted Answer · 2015-10-06 16:22:28Z

2

You need to use $compile for any html you insert that includes angular directives:

app.directive('removeOnClick', function($compile) {
    return {
        link: function(scope, elt, attrs) {
            scope.remove = function() {
                alert('here');
                elt.html('');
            };
            var link = $compile('<a href class="close" ng-click="remove()">LINK</a>')(scope)
            elt.append(link);
        }
    }
});

Also note that most of the time you can do this sort of removal by managing the model data and removing the data and let angular manage the dom. For example removing a row in an ng-repeat you would use a button to remove that item from the data array and angular would then remove it from the dom for you

DEMO

answered Oct 6, 2015 at 16:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fracedo · Accepted Answer · 2015-10-06 16:13:28Z

0

You need to bind a function to an element to trigger the remove function

try this,

var app = angular.module('myApp', []);
app.directive('removeOnClick', function() {
    return {
        link: function(scope, elt, attrs) {
            scope.remove = function() {
                alert('here');
                elt.html('');
            };
              elt.bind('click', function() {

                alert('here');
                elt.html('');
      });
            elt.append('<a href class="close" style="float:right;padding-right:0.3em" ng-click="remove()">&times;</a>');
        }
    }
});

answered Oct 6, 2015 at 16:13

Fracedo

6268 silver badges23 bronze badges

1 Comment

Dayan Over a year ago

I think he wants the elt.append() to execute. You only had to call ng-click on the element to run remove()

Collectives™ on Stack Overflow

removing the element via click in angularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related