Adding ng-click to div created with angular.element

Question

I have the following directive that has two children divs. The second div (created with angular.element) should be clickeable. Since I created it with angular.element, I'm trying to add ng-click with the attr function, but this doesn't work. What's wrong with this code?

       app.directive('mydir', function () {

                var directive = {};

                directive.restrict = 'EA';

                directive.replace = true;

                directive.scope = {
                     control: '=',
                };

                directive.template = '<div id="root"></div>';

                directive.link = function (scope, element, attrs) {

                        var wrap = angular.element('<div id="wrap"></div>');
                        element.append(wrap);                               
                        var node = angular.element('<div id="node"></div>');
                        node.attr('ng-click', 'toggle()');   // <--- this doesn't work
                        wrap.append(node);

                        scope.toggle = function () {
                            alert('clicked');
                        };
                });

                return directive;

            });

jsonmurphy · Accepted Answer · 2016-07-01 00:10:53Z

3

The element has to be compiled using angular's $compile service:

       app.directive('mydir', function ($compile) { // added dependency here

                var directive = {};

                directive.restrict = 'EA';

                directive.replace = true;

                directive.scope = {
                     control: '=',
                };

                directive.template = '<div id="root"></div>';

                directive.link = function (scope, element, attrs) {

                        var wrap = angular.element('<div id="wrap"></div>');
                        element.append(wrap);                               
                        var node = angular.element('<div id="node"></div>');
                        node.attr('ng-click', 'toggle()');   // <--- this doesn't work
                        var content = $compile(node)(scope);
                        wrap.append(content);

                        scope.toggle = function () {
                            alert('clicked');
                        };
                });

                return directive;

            });

Here's a short tutorial on using $compile. Hope that helps

edited Jul 1, 2016 at 0:10

answered Jun 30, 2016 at 23:58

jsonmurphy

1,6001 gold badge11 silver badges19 bronze badges

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

3 Comments

ps0604 Over a year ago

I'm getting Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' when it tries to append the content

jsonmurphy Over a year ago

Oops.. it should actually be var content = $compile(node)(scope);.. ill update the answer...

ps0604 Over a year ago

thanks, it works. I created this plunk with the answer plnkr.co/edit/6jIQm5WgElAnD6ZGQ4mp?p=preview

Collectives™ on Stack Overflow

Adding ng-click to div created with angular.element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related