How to append a dynamic div in AngularJS?

Question

.directive('mydirective', [function($scope, $document,windowService) {
return{
    link : function(scope,element,attars){
        --- Some more code —--

        var containers = $('.container’);
        containers.bind('click', function(event) {
            var elem = event.currentTarget;
            elem.append('<div>test</div>’); //Appending is failing
        });
    }
}]);

TypeError: 'undefined' is not a function (evaluating 'elem.append('<div>test</div>')')

I am just starting off with AngularJS and stuck with the above issue, I am trying to append a div to the container.

Dhaval Marthak · Accepted Answer · 2014-03-12 10:42:24Z

3

Try with this

containers.bind('click', function (event) {
        var elem = event.currentTarget;
        $(elem).append('<div>test</div>’); //Appending should work
}

as elem can be the HTML input object you have to convert it into jQuery object to use .append() method of jQuery! so wrap your elem variable arround $(). It should work

answered Mar 12, 2014 at 10:42

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

Comments

ColacX · Accepted Answer · 2015-09-06 12:35:51Z

0

Better to use this. Removes dependency to JQuery as Angular core only use JQLite. It is basically the same thing that happens. https://docs.angularjs.org/api/ng/function/angular.element

containers.bind('click', function (event) {
        var elem = event.currentTarget;
        angular.element(elem).append('<div>test</div>’); //Appending should work
}

answered Sep 6, 2015 at 12:35

ColacX

4,0289 gold badges37 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to append a dynamic div in AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related