Question

101

ng-click not working in dynamically created content

rated 0 times [ 104] [ 3] / answers: 1 / hits: 12905 / 9 Years ago, tue, may 26, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

patriciakiarrac

Add To Favorites

Follow

Total Points: 532

Total Questions: 100

Total Answers: 89

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

answered 9 Years ago jarod · Accepted Answer

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());