3

I have this function in Angular where I add a new slide with a ng-click in it.

var addSlide = function($scope, slideIndex, $event) {
  slideIndex++;
  var slider = angular.element('.slick-slider');
  var currentSlide = slider.slick('slickCurrentSlide');
  slider.slick('slickAdd', '<div class="slide" ng-click="addPhoto(); $event.stopPropagation();"><input type="file" class="camera-trigger" accept="image/*"><img class="photo-img" src="" /></div>');
};

Unfortunately dynamically created ng-click events don't work (ng-click not working from dynamically generated HTML), how can I fix this in my case, since it's a function inside a controller, instead of a directive?

Community
  • 1
  • 1
Bob Wassermann
  • 349
  • 2
  • 7
  • 19

1 Answers1

19

you need to add $compile service here, that will bind the angular directives like ng-click to your controller scope.Something like:

var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope);

Then append it to the HTML: 

angular.element(document.getElementById('foo')).append(temp);

You can also bind the event to the div as following:

 var div = angular.element("divID");
 div.bind('click', $scope.addPhoto());
lowercaseashley
  • 9
  • 3
UserNeD
  • 1,409
  • 13
  • 14
  • Thanks man. Binding wouldn't be that nice since it would require unique classes/ids. How would the $compile service work? – Bob Wassermann May 26 '15 at 21:15
  • 1
    var divTemplate = '..your div template'; var temp = $compile(divTemplate)($scope); Then append it to the HTML" angular.element(document.getElementById('foo')).append(temp); – UserNeD May 26 '15 at 21:16
  • 1
    does it possible to add `$compile` inside Service and its showing error like 'SCRIPT5007: Object expected' – Kathir Mar 09 '16 at 10:15
  • Could you please explain more? – UserNeD Mar 22 '16 at 21:37
  • 1
    what if I don;t want to append this code in my html, as i am using it in DataTable so I am not able to add it ti html.... What should I do now ? – Sonu Bamniya Oct 01 '16 at 07:02
  • Then you can bind the event to your targeted HTML element: var div = angular.element("divID"); div.bind('click', $scope.addPhoto()); – UserNeD Oct 04 '16 at 04:42
  • @Joyson I don't know why you mention me here, but if you've then It's my responsibility to revert. And yes it will work but, I think instead of using this we should use `ng-repeat` with array. – Sonu Bamniya Sep 11 '17 at 11:01