AngularJs - データテーブルに新しいデータを追加した後にページをリロードする方法

Question

私はangularjsを初めて使用し、angularjsブートストラップデータテーブルを使用しています。今、私のデータテーブルに新しいレコードを追加すると、mysqlデータベースで更新されていますが、新しいレコードをテーブルにも表示できるようにページをリロードする必要がありますが、どのように行うのか分かりません。誰でも助けてくれますか？ ui-bootstrp.js内のaddRoleData（）の成功時にtableRoleCtrlを初期化できますか？ここで

は私のコードは

UI-bootstrap.jsある

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, content, tableService) { 

     //add new role 
     $scope.addRole = function(w) { 
      tableService.addRoleData(w) 
     } 
}) 

table.js

.controller('tableRoleCtrl', function($filter, $sce, ngTableParams, tableService) { 
     //var data = tableService.data; 

     var self = this; 
     var promise = tableService.getRoleData(); 
     self.data = []; 

     promise.then(
      function(payload) { 

       self.data = payload.data; 
       //alert(JSON.stringify(self.data)); 
       //console.log("test" + self.data) 

       self.tableEdit = new ngTableParams({ 
        page: 1,   // show first page 
        count: 10   // count per page 
       }, { 
        total: self.data.length, // length of data 
        getData: function($defer, params) { 
         $defer.resolve(self.data.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
        } 
       }); 

      }, 
      function(errorPayload) { 
       $log.error('failure loading movie', errorPayload); 
      }); 

     //to updaate data 
     self.updateRole = function(w) { 
      tableService.updateRoleData(w); 
     } 

    }) 

service.js

.factory('tableService', ['$http', function($http){ 
     var _this = this; 
     return { 

      // role 
      getRoleData: function() { 
       return $http.get("data/getRoles.php"); 
      }, 
      updateRoleData: function(w) { 
       $http.post("data/updateRole.php", w) 
      }, 
      addRoleData: function(w) { 
       $http.post("data/addRole.php", w) 
      } 
     } 
    }]) 

HTML

<div data-ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="addrole.html"> 
     <div class="modal-header"> 
      <h4 class="modal-title">Add Role</h4> 
     </div> 
     <div class="modal-body m-l-15"> 
      <form role="form"> 
       <div class="row"> 
        <div class="col-md-8"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span> 
          <div class="fg-line"> 
           <input type="text" name="role_title" ng-model="add_role.role_title" class="form-control" placeholder="Title"> 
          </div> 
         </div> 
         <br/> 
         <div class=""> 
          <div class="input-group"><span class="input-group-addon"><i class="zmdi zmdi-account-circle"></i></span> 
           <select chosen multiple> 
            <option>Use seetings from</option> 
            <option>HR</option> 
            <option>Employee</option> 
            <option>Admin</option> 
           </select> 
          </div> 
         </div> 
        </div><br/> 
       </div> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-link" ng-click="ok(); addRole(add_role)">Submit</button> 
      <button class="btn btn-link" ng-click="cancel()">Cancel</button> 
     </div> 

    </script> 
    <button class="btn btn-default" ng-click="openStatic('addrole')">Add Roles</button> 
</div> 
<div class="table-responsive"> 
    <table ng-table="tctrl.tableEdit" class="table table-striped" show-filter="true"> 
     <tr ng-repeat="w in $data" ng-class="{ 'active': w.$edit }" ng-click="ShowHide12()" style="cursor:pointer"> 
      <a href="" ng-click="getSingleRole()"> 
       <td><span ng-if="!w.$edit">{{ w.rl_title }}</span> 

        <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.rl_title" /></div> 
       </td> 
      </a> 
      <td> 
       <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true; "><i class="zmdi zmdi-edit"></i></button>&nbsp; 
       <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = false"><i class="zmdi zmdi-close"></i></button> 
       <button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false; tctrl.updateRole(w)"><i class="zmdi zmdi-check"></i></button> 
       <button type="button" class="btn btn-default" ng-if="w.$edit" data-ng-click="w.$edit = 0" ><i class="zmdi zmdi-close"></i></button> 
      </td> 
     </tr> 
    </table> 
</div> 

Answer 1

あなたは、実際にデータが更新された場合、AngularJSはMVCフレームワークであり、各モデル AngularJSはビューを更新するウォッチャーを作成するページをリロードする必要はありません。

基本的には、コントローラのスコープ変数$scope.tableDataにテーブルデータを格納してから、ng-repeat="row in tableData"を使用してテーブルデータを繰り返し処理するだけです。 ng-repeatはあなたのtableDataの変更を見て、テーブルを更新します。

Answer 2

あなたが動的にngTableデータを変更した場合、あなたがそれを更新することができます。

self.tableEdit.reload();