Question

更新

问题： 让我试着用一两行来解释我想要的东西，在演示1中，当我点击编辑按钮时我使用了角度数据表，数据没有出现在编辑表格中，而在演示2中我没有＆＃39;使用任何数据表，但数据显然以编辑形式出现，我希望数据使用Datatables出现在Demo1中。数据在$ scope.update中，但由于某些原因，它不会出现在HTML中，而使用相同的HTML它没有数据表就可以正常工作。

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

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

背景

最初在左侧，数据是从包含一个输入类型和一个Select（Colony Type）的表单插入的，左侧有两个表单Insert，Update表单，一个表单用于插入，一个表单用于插入编辑，当插入表单可见时，编辑表单被隐藏，反之亦然，在右侧，数据列表与数据表以及编辑和删除按钮一起显示，重要的是按钮是在DataTable内部制作的代码，而不是HTML页面，现在删除和插入工作绝对正常，但编辑!!不，它没有。

问题

案例1 :(当我使用数据表时） 当单击编辑按钮（CODED INSIDE DATATABLES）时，会发送一个ID，在下面的图片中，ID被安慰＆＃34; 47＆＃34;然后生成$ http请求，该请求带来数据并在控制台中打印。但是当我尝试将值注入Update表单时它不起作用，尽管当我安排$ scope时，值会被注入更新对象但不会在HTML页面上打印。

案例2 :(当我不使用数据表时） 如果我不使用数据表并单击编辑按钮，那么每件事情都可以正常工作，数据会被注入更新对象并打印在HTML页面上。

HTML PAGE：

如果使用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>

如果未使用DataTables

<!-- 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;

             });
     };

Answer 1

您正在为控制器型号混合$scope和this。

由于您使用的是controllerAs别名....所有数据模型都需要绑定到控制器中的this，或者您需要删除控制器的别名并仅使用{{1} }

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

Answer 2

正如@charlietfl在他的回答中提到的那样，使用dataTables的示例错误地将同一个控制器分配两次，一次使用ng-controller="colony_Controller"，一次使用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

数据在控制台中打印，分配给$ scope但不以HTML格式打印

2 个答案: