Currently, I am developing an application that retrieves data and presents it in a tabular format. To implement sorting and pagination features, Angular JS is being utilized. The pagination section of the app is dynamically added through an Angular function that constructs a string and assigns it to the $scope.pagination variable. However, the issue arises when attempting to interact with ng-click functions embedded within this injected HTML, as they fail to be recognized upon clicking. It seems likely that this occurs because these elements are not present during the initial rendering of the page.
<html ng-app="listingsApp">
<body ng-controller="pageController" ng-init="type=0">
<div class="pagination" ng-bind-html="paginate"></div>
var listingsApp = angular.module('listingsApp', []);
listingsApp.controller('pageController', function($scope, $sce, $filter, $http) {
$scope.BuildPaginationHtml = function(showPage) {
pageString = "<span class=\"paginationItem \" ng-click=\"GoToPage(" + i + ")\"> " + i + " </span>";
$scope.pagination = pageString;
}
}
Despite setting up ng-click on the span element, it fails to trigger the GoToPage function as expected. Upon checking the console logs for verification, it becomes apparent that all other click events on the page function correctly, except for those within the injected HTML.