0

更新

问题： 让我试着用一两行来解释我想要什么，在演示 1 中，当我点击编辑按钮时我使用了 Angular Datatables 数据不会出现在编辑表单中，而在演示 2 中我没有使用任何数据表，但数据清楚地出现在编辑表单中，我希望数据使用数据表出现在 Demo1 中。数据在 $scope.update 内，但由于某些原因，它没有出现在 HTML 中，而使用相同的 HTML 它在没有数据表的情况下完美运行。

演示 1： http ://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz? p=preview

演示 2： http ://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ? p=preview

背景

最初在左侧，数据是从包含一种输入类型和一种选择（殖民地类型）的表单插入的，左侧有两种表单插入，更新表单，一种用于插入，一种用于编辑，当插入表单是可见的，编辑表单是隐藏的，反之亦然，在数据表的帮助下显示数据列表以及编辑和删除按钮，重要的是按钮是在数据表代码中制作的，而不是在 HTML 页面上，现在 Delete 和 Insert 工作得很好，但是 Edit !! 不，它没有。

问题

案例1：（当我使用数据表时） 当点击编辑按钮（CODED INSIDE DATATABLES）时，会发送一个ID，在下图中，ID是“47”，然后发出一个$http请求，它会带来数据并打印在安慰。但是当我尝试将值注入更新表单时它不起作用，尽管当我安慰 $scope 时，值被注入更新对象但不在 HTML 页面上打印。

案例 2：（当我不使用 Datatables 时） 如果我不使用 Datatables 并单击 Edit 按钮，一切正常，数据被注入更新对象并打印在 HTML 页面上。

网页：

如果使用 DataTables

<!-- IF DataTables are Used For printing the Data on Right Side-->
<div ng-controller="colony_Controller as Main_Module">
    <table class="table table-striped table-bordered" align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
</table>

如果不使用数据表

<!-- If DataTables are NOT Used for Printing the Data on Right Side -->

    <table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th style="width: 323px;" aria-label="">Colony Name</th>

            <th style="width: 170px;" aria-label="">Actions</th>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="colony in es_colony_details" >
            <td style="width: 323px;" aria-label="">{{colony.es_colony_name}}</td>
            <td>
                <button ng-click="EditColonyData(colony.es_colony_id)" class="btn btn-primary">
                    <i class="icon-edit"></i> Edit</button>
                <button ng-click="DeleteColonyData(colony.es_colony_id)" class="btn btn-danger">
                    <i class="icon-remove icon-white"></i> Delete</button>
            </td>
        </tr>
    </tbody>
    </table>

控制器

    Main_Module.controller('colony_Controller', function colony_Controller($window, $scope, $http, bootbox, $compile, DTOptionsBuilder, DTColumnBuilder, SimpleHttpRequest, DelMainRecPicRecUnlinkPic, message)
 {
     $scope.field = {};
     $scope.update = {};
     var dtInstance = {};

     /********************************** FETCH DATA START *******************************/
     $http.get('http://localhost:3000/api/SELECT/es_colony_type').success(function successCallback(data)
     {
         $scope.es_colony_type = data.es_colony_type;
         //console.log(data.es_colony_type);
     });

     // ONLY USED WHEN Datatable are NOT 
      //$http.get("http://localhost:3000/api/SELECT/es_colony").success(function successCallback(data)
      //{
      //    $scope.es_colony_details = data.es_colony;
      //    console.log(data.es_colony);
      //});
     /********************************** FETCH DATA END *********************************/

     /********************************** DISPLAY DATA START *******************************/
     var vm = this;
     vm.dtOptions = DTOptionsBuilder
     .fromFnPromise(function()
     {
         return $http.get('http://localhost:3000/api/SELECT/es_colony')
             .then(function(response)
             {
                 return response.data.es_colony;
             });
     })
     .withOption('order', [0, 'desc'])
     .withDisplayLength(5)
     .withPaginationType('simple_numbers')
     .withOption('createdRow', function(row, data, dataIndex)
     {
         $compile(angular.element(row).contents())($scope);
     })
     vm.dtColumns =
     [
         DTColumnBuilder.newColumn('es_colony_name').withTitle('Colony'),
         DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withOption('width', '31%')
         .renderWith(function(data, type, full, meta)
         {
             return '<button class="btn btn-primary" ng-click="EditColonyData(' + data.es_colony_id + ');">' +
                 '<i class="icon-edit"></i> Edit' + '</button>&nbsp;' +
                 '<button class="btn btn-danger" ng-click="DeleteColonyData(' + data.es_colony_id + ');">' +
                 '<i class="icon-remove icon-white"></i> Delete' + '</button>';
         })
     ];

     $scope.EditColonyData = function(id)
     {
         console.log(id);
         $http.get('api/SELECTBYID/es_colony/es_colony_id/'+id)
             .success(function(data)
             {
                 console.log(data);
                 console.log($scope);


                 $scope.YesEdit = true;
                 $scope.update = data.es_colony[0];

                 // **This is where I'm injecting data Back to $scope object**

                 $scope.update.es_colony_type_id = data.es_colony[0].es_colony_type_id;

             });
     };
4

2 回答 2

0

您正在混淆您$scope的this控制器模型。

由于您使用的是controllerAs别名....您的所有数据模型都需要绑定到this控制器中，或者您需要摆脱控制器的别名并仅使用$scope

大多数人会建议使用别名和this

于 2016-01-19T19:22:27.190 回答
0

正如@charlietfl 在他的回答中提到的那样，您的示例使用dataTables错误地将同一控制器分配了两次，一次是 with ng-controller="colony_Controller"，一次是 with ng-controller="colony_Controller as Main_Module。第二个控制器副本中的数据表将无法访问第一个控制器中的变量。

<div ng-controller="colony_Controller">
....
    <div ng-controller="colony_Controller as Main_Module">
      <table align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
      </table>
    </div>
</div>

要更正此问题，您需要在使用第一种语法 ( $scope) 或第二种 ( controller as) 之间进行选择，并确保所有代码都使用相同的格式。

在这个修改后的版本中，dtOptions并dtColumns已移至$scope，并删除了额外的控制器：

$scope.dtOptions = DTOptionsBuilder
  .fromSource('data_colony.json')
  ...

$scope.dtColumns = [
  ...
];

<div ng-controller="colony_Controller">
  ...
  <div>
    <table align="center" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
    </table>
  </div>
</div>

http://plnkr.co/edit/GB0IIQQoEaLN0QPBSjCz?p=preview

于 2016-01-20T01:04:53.560 回答