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

Question

更新

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

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

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

背景

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

问题

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

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

HTML 页面：

如果使用数据表

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

             });
     };

Answer 1

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

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

大多数人会推荐使用别名和this

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