ngClick不使用CodeIgniter框架的多個按鈕

Question

我是Angularjs的新手。我試圖調用按鈕的onclick函數。我用ng-click但不起作用。這些按鈕是動態創建的。

我在CodeIgniter框架中實現這個應用程序。這是我的代碼;

//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

問題是你將不會被綁定到控制器新的HTML。無論何時，當您使用未編譯的Angular指令插入新的HTML代碼時，就像您使用JQuery一樣，除非您使用$compile函數綁定它，否則它將不會綁定到控制器。

有一種方法，你可以用你的代碼做到這一點，但相反，這應該被重構。您在呈現之前正在等待來自POST請求的數據。在獲取數據後（而這是需要$compile的地方），您可以改爲使用$scope，它將包含數據數組並根據數組中的內容呈現HTML，而不是綁定HTML。

的代碼應該是這樣的：

<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'); 
    } 
});