ngClick not working to multiple buttons using CodeIgniter framework - php

Question

I'm new to Angularjs. I'm trying to call function onclick of the buttons. I used ng-click but it's not working. These buttons are dynamically created.
I'm implementing this application in CodeIgniter framework. Here is my code;
//view
<section class="content" ng-app="manageApp">
<div growl></div>
<div class="row" ng-controller="customerManageController">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Customers Information</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="customer_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
//js file
var manageApp = angular.module('manageApp', ['ngRoute', 'angular-growl', 'ngAnimate']);
manageApp.controller('customerManageController', function ($scope, $http, growl) {
$http({
method: 'POST',
url: 'list_customers',
headers: {
"Content-Type": "application/json"
},
}).success(function (data) {
for(var i=0; i<data.length; i++) {
var tableBody = tableBody+('<tr id="'+data[i].id+'"><td>'+data[i].id+'</td><td>'+data[i].name+'</td><td>'+data[i].mobile+'</td><td>'+data[i].city+'</td><td>'+data[i].email+'</td><td>'+data[i].address1+'</td><td>'+data[i].address2+'</td><td><button ng-click="deleteFunc()" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>');
}
$('#tableBody').html(tableBody);
$('#customer_table').DataTable();
});
$scope.deleteFunc = function () {
alert('here');
}
});

Answer 1

The problem is you're inserting new HTML that won't be bound to the controller. Anytime you insert new HTML code with Angular directives that isn't compiled, like you did with JQuery, it won't be bound to the controller unless you use the $compile function to bind it.
There is a way you can do this with your code but instead this should be refactored. You're waiting for data from a POST request before you render it. Instead of binding the HTML after you get the data (this is where $compile would be required) you can instead make use of a $scope which will contain an array of the data and render the HTML based on what is in that array.
The code would look like this:
<section class="content" ng-app="manageApp">
<div growl></div>
<div class="row" ng-controller="customerManageController">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Customers Information</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="customer_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</thead>
<!-- Table now populates with data after it's received -->
<tbody id="tableBody">
<div ng-repeat="for data in receivedData">
<tr id="{{ data.id }}>
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.mobile}}</td>
<td>{{data.city}}</td>
<td>{{data.email}}</td>
<td>{{data.address1}}</td>
<td>{{data.address2}}</td>
<td>
<button ng-click="deleteFunc()" class="btn btn-danger">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
JavaScript:
var manageApp = angular.module('manageApp', ['ngRoute', 'angular-growl', 'ngAnimate']);
manageApp.controller('customerManageController', function ($scope, $http, growl) {
// This will hold the data
$scope.receivedData = [];
$http({
method: 'POST',
url: 'list_customers',
headers: {
"Content-Type": "application/json"
},
}).success(function (data) {
// If here there is data, show it.
if (data.length > 0) {
$scope.receivedData = data;
}
}
});
$scope.deleteFunc = function () {
alert('here');
}
});