Ng-click does not work on dynamically generated content
I have this function in Angular where I add a new slide with 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 generated ng-click events do not work ( ng-click does not work from dynamically generated HTML ), how can I fix this in my case, since this is a function inside a controller, not a directive?
+3
source to share
1 answer
you need to add the $ compile service here that will bind angular directives like ng-click to your controller scope. Something like:
var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope);
Then add it to HTML:
angular.element(document.getElementById('foo')).append(temp);
You can also bind the event to a div like this:
var div = angular.element("divID");
div.bind('click', $scope.addPhoto());
+19
source to share