数据打印在控制台，分配到$范围，但在HTML中没有打印 [英] The Data is printed in console, Assigned to $scope but NOT printing in HTML

查看：558
本文介绍了数据打印在控制台，分配到$范围，但在HTML中没有打印的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新

问题：
让我试着解释什么，我想在一个或两行，在演示1，我已经用角的DataTable当我点击编辑按钮中的数据不会出现在编辑的形式，而在演示2我没有使用任何数据表但数据清楚地出现在编辑表格，我想用数据的DataTable出现在demo1的。数据是$ scope.update内，但由于某种原因，它不是在HTML中出现，而使用相同的HTML它完美的DataTable没有

demo1的： http://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz?p=preVIEW

DEMO2： http://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ?p=preVIEW

背景

最初在左手侧上的数据是从含有一种输入类型和一个选择（菌落型）形式插入，有两种形式插入，在左手侧的一个形式是用于插入，一个用于更新形式编辑，当插入表格可见编辑表单是隐藏的，反之亦然，在右侧会显示与数据表的帮助与编辑一起的数据列表和删除按钮，重要的是按钮的数据表中所做的code，而不是HTML网页上，现在删除和插入的作品精美绝伦，但编辑！不，它不需要。

问题

案例1：（当我使用数据表）
当编辑按钮（codeD内的数据表）被点击的ID发送，在下面的图片ID是安慰47那么$ HTTP请求时带来的数据，并在控制台打印。但是当我尝试注入的值返回到更新的形式，它不工作，虽然当时我安慰$范围的值被注入更新的对象，但HTML页面上不打印。

第2种情况：（当我不使用数据表）
如果我不使用数据表，然后单击编辑按钮，每一件事情的工作绝对没问题，数据注入更新的对象并打印HTML页面上。

HTML页：

如果数据表使用 

 ＆LT;！ -  IF数据表用来打印在右侧的数据 - ＆GT;
＆LT; D​​IV NG控制器=colony_Controller为Main_Module＆GT;
    ＆LT;表类=table表条纹表镶上ALIGN =中心的数据表=DT-选项=Main_Module.dtOptionsDT​​-列=Main_Module.dtColumns级=行边界悬停＆GT ;
＆LT; /表＆gt;

如果数据表不使用 

 ＆LT;！ - 如果数据表不用于打印在右侧的数据 - ＆GT;    ＆LT;表类=table表条纹表镶上＆GT;
    ＆LT;＆THEAD GT;
        ＆所述; TR＆GT;
            百分位风格=WIDTH：323px; ARIA标签=＆菌落名称＆LT; /第i            百分位风格=宽度：170像素; ARIA标签=＆GT;操​​作＆LT; /第i
        ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;    ＆LT;＆TBODY GT;
        ＆LT; TR NG重复=殖民地es_colony_details＆GT;
            ＆LT; TD风格=WIDTH：323px; ARIA标签=＆GT; {{colony.es_colony_name}}＆LT; / TD＆GT;
            ＆所述; TD＆GT;
                ＆LT;按钮NG点击=EditColonyData（colony.es_colony_id）级=BTN BTN-小学＆GT;
                    ＆LT; I类=图标编辑＆GT;＆LT; I＆GT /;编辑＆LT; /按钮＆GT;
                ＆LT;按钮NG点击=DeleteColonyData（colony.es_colony_id）级=BTN BTN-危险＆GT;
                    ＆LT; I类=图标删除图标白＆GT;＆LT; / I＆GT;删除＆LT; /按钮＆GT;
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;

控制器 

  Main_Module.controller（'colony_Controller'，功能colony_Controller（$窗口，$范围，$ HTTP，bootbox，$编译，DTOptionsBuilder，DTColumnBuilder，SimpleHtt prequest，DelMainRecPicRecUnlinkPic，消息）
 {
     $ scope.field = {};
     $ scope.update = {};
     变种dtInstance = {};     / **********************************获取数据START ************ ******************* /
     $ http.get（的http：//本地主机：3000 / API / SELECT / es_colony_type'）.success（功能successCallback（数据）
     {
         $ scope.es_colony_type = data.es_colony_type;
         //console.log(data.es_colony_type）;
     }）;     //只有在使用时数据表中未
      //$http.get(\"http://localhost:3000/api/SELECT/es_colony\").success(function successCallback（数据）
      // {
      // $ scope.es_colony_details = data.es_colony;
      //执行console.log（data.es_colony）;
      //}）;
     / **********************************获取数据END ************ ********************* /     / **********************************显示数据开始************ ******************* /
     VAR VM =这一点;
     vm.dtOptions = DTOptionsBuilder
     .fromFnPromise（函数（）
     {
         返回$ http.get（的http：//本地主机：3000 / API / SELECT / es_colony'）
             。然后（功能（响应）
             {
                 返回response.data.es_colony;
             }）;
     }）
     .withOption（'秩序'，[0，'递减']）
     .withDisplayLength（5）
     .withPaginationType（'simple_numbers'）
     .withOption（'createdRow'，函数（行，数据，dataIndex）
     {
         $编译（angular.element（行）.contents（））（$范围内）;
     }）
     vm.dtColumns =
     [
         DTColumnBuilder.newColumn（'es_colony_name'）。withTitle（'殖民地'），
         DTColumnBuilder.newColumn（空）.withTitle（操作）。notSortable（）。withOption（'宽'，'31％'）
         .renderWith（功能（数据，类型，充分，元）
         {
             回归'＆LT;按钮类=BTN BTN-主要NG点击=EditColonyData（'+ data.es_colony_id +'）;＆GT;' +
                 '＆LT; I类=图标编辑＆GT;＆LT; / I＆GT;编辑'+'＆LT; /按钮＆GT;＆安培; NBSP; +
                 '＆LT;按钮类=BTN BTN-危险NG点击=DeleteColonyData（'+ data.es_colony_id +'）;＆GT;' +
                 '＆LT; I类=图标删除图标白＆GT;＆LT; / I＆GT;删除'+'＆LT; /按钮＆GT;';
         }）
     ];     $ scope.EditColonyData =功能（ID）
     {
         的console.log（ID）;
         $ http.get（API / SELECTBYID / es_colony / es_colony_id /'+ id）的
             .success（功能（数据）
             {
                 的console.log（数据）;
                 的console.log（$范围内）;
                 $ scope.YesEdit = TRUE;
                 $ scope.update = data.es_colony [0];                 // **这是我注入数据返回$范围对象**                 $ scope.update.es_colony_type_id = data.es_colony [0] .es_colony_type_id;             }）;
     };


解决方案

由于被@charlietfl在他的答复中提到，使用例如数据表被错误地分配相同的控制器两次，一次与 NG-控制器=colony_Controller，并曾经与 NG-控制器=colony_Controller为Main_Module 的控制器的第二拷贝中的数据表将不能访问该变量在第一控制器

 ＆LT; D​​IV NG控制器=colony_Controller＆GT;
....
    ＆LT; D​​IV NG控制器=colony_Controller为Main_Module＆GT;
      ＆LT;表ALIGN =中心的数据表=DT-选项=Main_Module.dtOptionsDT​​-列=Main_Module.dtColumns级=行边界悬停＆GT;
      ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

要解决这个问题，你需要使用第一种语法（ $范围）或第二（在控制器），并确保所有code为使用相同的格式。

在此修改后的版本， dtOptions 和 dtColumns 已经被转移到 $范围，并取消了额外的控制器：

$ scope.dtOptions = DTOptionsBuilder
  .fromSource（'data_colony.json'）
  ...$ scope.dtColumns = [
  ...
];

＆LT; D​​IV NG控制器=colony_Controller＆GT;
  ...
  ＆LT; D​​IV＆GT;
    ＆LT;表ALIGN =中心的数据表=DT-选项=dtOptionsDT​​-列=dtColumns级=行边界悬停＆GT;
    ＆LT; /表＆gt;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

http://plnkr.co/edit/GB0IIQQoEaLN0QPBSjCz?p=$p$ PVIEW

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.

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

Demo2: 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.

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.

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.

HTML PAGE:

If DataTables are Used

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

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

             });
     };

解决方案

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.

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

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

$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

这篇关于数据打印在控制台，分配到$范围，但在HTML中没有打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆