Unable to trigger ng-click on dynamically generated elements

Question

Unable to trigger ng-click on dynamically generated elements

I have been working on an Angular function that adds a new slide when clicked with a ng-click event.

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 are not functioning properly (ng-click not working from dynamically generated HTML). How can I resolve this issue since it is a function within a controller rather than a directive?

javascript angularjs angularjs-scope

Answer 1

Answer №1

If you want to incorporate angular directives like ng-click into your controller scope, you'll need to include the $compile service. Here's an example:

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

Next, add it to the HTML document:

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

To bind an event to the div element, use the following code:

 var div = angular.element("divID");
 div.bind('click', $scope.addPhoto());

Answer 2

If you want to incorporate angular directives like ng-click into your controller scope, you'll need to include the $compile service. Here's an example:

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

Next, add it to the HTML document:

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

To bind an event to the div element, use the following code:

 var div = angular.element("divID");
 div.bind('click', $scope.addPhoto());

Unable to trigger ng-click on dynamically generated elements

Answer №1

Similar questions

There seems to be an issue with Three.js: geometry.addEventListener isn't a recognized

Using Angular to make GET requests with JSON data in PHP

Using NodeJS to handle server side FormData

Using jQuery to toggle between two elements and updating the SELECT field

Using Express.js, Passport.js, and SockJS to Link User Socket with deserializeUser

Are any of the loop values matching?

jQuery. An advanced selection menu

The content of xmlhttp.responseText is not being displayed in the innerHTML

The elements in Dynamically generated ChartJs do not align with the bottom of the y-axis

What is the best way to make sure that only one tab changes color when clicked?

The LatinSquare.js script has exceeded the maximum call stack size limit

Tips for retrieving data using ajax with servlets:

"Exploring the power of Vue3's composition API in managing the

Imagine a scenario where clicking on an image causes it to be rotated or

What is the reason behind the shifting behavior of e.currentTarget when using event delegation in jQuery?

The challenge of verifying CSRF token authenticity persists when uploading gifs using Carrierwave in AJAX requests

Exploring the concept of nesting resources within AngularJS

Relocate the number of records displayed per page next to the pagination controls in datatables

Efficiently encode and decode JSON data between PHP and JavaScript

Create an event listener for clicking on an image that potentially has a corner ribbon obscuring a portion of it