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

Update

更新

Problem: Let me try to explain what I want in one or two lines, In Demo 1 where I've used Angular Datatables when I click on Edit button the data DOES NOT appear in Edit form, whereas in Demo 2 I haven't used any datatables but the data is clearly appearing in edit form, I want the data to appear in Demo1 using Datatables. The data is inside the $scope.update but for some reasons it is not appearing in HTML whereas using the same HTML It works perfectly without datatables.

问题:让我试着解释我想要在一个或两行,在我使用的演示1角的datatable当我点击编辑按钮编辑表单中的数据没有出现,而在演示2我没有使用任何的datatable但显然是出现在编辑表单的数据,我想要的数据出现在Demo1使用datatable中。数据在$范围内。更新，但由于某些原因，它没有出现在HTML中，而使用相同的HTML，它在没有datatable的情况下工作得很好。

Demo1: http://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz?p=preview

Demo1:http://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz?p=preview

Demo2: http://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ?p=preview

以及接下来:http://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ?p=preview

Background

背景

Initially on the left hand side the Data is inserted from a form which contain one Input type and one Select (Colony Type), there are two forms Insert, Update form on the left hand side one form is for insertion and one for editing, when the insertion form is visible the edit form is hidden and vice versa, on the right hand side the list of data is displayed with the help of datatables along with Edit and Delete button, Important thing is the buttons are made inside the DataTable code and not on HTML page, now Delete and Insert works absolutely fine, but Edit !! No it doesn't.

最初左边的数据插入表单包含一个输入类型和一个选择(殖民地类型),有两种形式插入、更新表单左边一个插入表单,另一个用于编辑,当插入表单是可见的编辑表单隐藏的,反之亦然,右边的列表数据显示在datatable的帮助编辑和删除按钮,重要的是按钮是在DataTable代码内而不是在HTML页面上，现在删除和插入的工作绝对没问题，但是编辑!!不,它不。

Problem

问题

Case 1: (When I use Datatables) when the Edit button (CODED INSIDE DATATABLES) is clicked an ID is sent, In the Below picture the Id is consoled "47" then an $http request is made which brings the Data and printed in console. but when I try to inject the values back to Update form it doesn't work, although when I consoled $scope the values are injected into update object but not printing on HTML page.

案例1:(当我使用datatable时)当编辑按钮(在datatable里面编码)被单击发送ID时，在下图中ID被安慰为“47”，然后就会发出$http请求，将数据带来并打印在控制台。但是当我尝试将值注入到更新表单时，它不起作用，尽管当我安慰$scope时，这些值被注入到更新对象中，而不是在HTML页面上打印。

Case 2: (When I don't Use Datatables) If I don't use Datatables and click the Edit the button every thing works absolutely fine and the data is injected into update object and printed on HTML page.

案例2:(当我不使用datatable时)如果我不使用Datatables并单击Edit按钮，一切都会运行良好，数据被注入update对象并打印在HTML页面上。

HTML PAGE:

HTML页面:

If DataTables are Used

如果使用的datatable

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

如果不使用datatable

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

Controller

控制器

    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;

             });
     };

2 个解决方案

#1

You are mixing up $scope and this for your controller model.

你混合了$scope，这是为了你的控制器模型。

Since you are using controllerAs alias....all your data model needs to be bound to this in controller or you need to get rid of alias for controler and only use $scope

因为你正在使用controllerAs别名....所有的数据模型都需要在controller中绑定到这个，或者需要删除controler的别名，只使用$scope

Most people would recommend using the alias and this

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

#2

As was mentioned by @charlietfl in his answer, your example using dataTables is incorrectly assigning the same controller twice, once with ng-controller="colony_Controller" and once with ng-controller="colony_Controller as Main_Module. The data tables inside the second copy of the controller will not have access to the variables in the first controller.

正如@charlietfl在他的回答中提到的，您使用datatable的示例两次分配相同的控制器，一次是使用ng-controller="colony_Controller"，一次使用ng-controller="colony_Controller =" 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>

To correct this, you need to choose between using the first syntax ($scope) or the second (controller as) and ensure that all the code is using the same format.

要纠正这一点，您需要在使用第一个语法($scope)和第二个语法(controller as)之间进行选择，并确保所有代码都使用相同的格式。

In this modified version, dtOptions and dtColumns have been moved to $scope, and the extra controller removed:

在这个修改后的版本中，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

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