ng-click not working on newly appended elements

Question

Why is my ng-click not working when I appended it with a button? The same ng-click is working when I initially loaded the button.

app.controller('demoCtrl', function() {


          this.clk = '<button ng-click="dctrl.click()">Button</button>';

          this.click = function() {

            alert('clicked');

          }
})

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

          return {

            restrict: 'A',
            scope: {

              actionBtn: '='

            },
            link: function(scope, element, attrs) {

              element.append(scope.actionBtn);

            }

          }

})

HTML

<body ng-controller="demoCtrl as dctrl">

        <div btn-click action-btn="dctrl.clk"></div>

</body>

http://plnkr.co/edit/QPKXfGd9s7HzLvEfKvbG?p=preview

Update

I've also tried this way but no luck

element.append($compile(scope.actionBtn)(scope));

This might be of help http://stackoverflow.com/questions/16296264/ng-click-doenst-work-on-dynamic-dom-angularjs — mukesh, Jun 16 '15 at 11:34
@mukesh: I've tried this element.append($compile(scope.actionBtn)(scope)); but not working — Body, Jun 16 '15 at 11:38
`element.append($compile(scope.actionBtn)(scope));` won't work because of the isolated scope of the directive — Arun P Johny, Jun 16 '15 at 11:40
@ArunPJohny: Why don't you post your reply as an answer? Thank you very much — Body, Jun 16 '15 at 11:44

score 2 · Answer 1 · answered Jun 16 '15 at 11:46

2

You need to compile an new dom element created manually for angularjs to work on it so

app.directive('btnClick', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.append($compile(scope.$eval(attrs.actionBtn))(scope));
        }
    }
}])

var app = angular.module('my-app', [], function() {})

app.controller('demoCtrl', function() {
  this.clk = '<button ng-click="dctrl.click()">Button</button>';

  this.click = function() {
    alert('clicked');
  }
})

app.directive('btnClick', ['$compile',
  function($compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.append($compile(scope.$eval(attrs.actionBtn))(scope));
      }
    }
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="demoCtrl as dctrl">
  <div action-btn="dctrl.clk" btn-click></div>
</div>

answered Jun 16 '15 at 11:46

Arun P Johny

384,651
66
527
531

Also the scope mustn't be isolated. – Joao Leal Jun 16 '15 at 11:57
@JoaoLeal: How can I use this with a isololated scope defined? I have another click function which is happening thorough isolated scope – Body Jun 16 '15 at 12:12
@JoaoLeal: Thank you for the reply. Could you please explain me what does this part do '&onClick' – Body Jun 16 '15 at 18:31
This question (and answers) should help you http://stackoverflow.com/questions/14908133/what-is-the-difference-between-vs-and-in-angularjs – Joao Leal Jun 16 '15 at 23:14

ng-click not working on newly appended elements

1 Answers1