DOM 元素错误答案

【问题标题】：DOM element errorDOM 元素错误
【发布时间】：2018-06-11 18:10:44
【问题描述】：

我有这个代码：

aebdApp.controller('datafileController', function ($scope, $http) {
    $http.get('http://127.0.0.1:8084/json/datafiles.json').then(function (response) {
        $scope.datafile = response.data;

        $scope.datafile.items.forEach(function (i, index) {
            var data = [{
                values: [i.used_mb, i.free_mb],
                labels: ['Used MB', 'Free MB'],
                type: 'pie'
            }];
            Plotly.plot('myDiv_' + index, data);
        });
    });
});

JSON：

  {
"items": [
  {
    "file_id": 15,
    "datafile_name": "/u01/app/oracle/product/12.2/db_1/dbs/u01apporacleoradataorcl12orclaebd_tables_0",
    "tablespace_name": "SYSTEM",
    "total_mb": 20,
    "used_mb": 19,
    "free_mb": 0,
    "percentage_used": 95,
    "timestamp": "2017-12-31T01:58:35.201Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/15"
      }
    ]
  },
  {
    "file_id": 13,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/APEX_1941389856444596.dbf",
    "tablespace_name": "SYSTEM",
    "total_mb": 8,
    "used_mb": 6,
    "free_mb": 1,
    "percentage_used": 75,
    "timestamp": "2017-12-31T01:58:35.224Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/13"
      }
    ]
  },
  {
    "file_id": 17,
    "datafile_name": "/u01/app/oracle/product/12.2/db_1/dbs/u01apporacleoradataorcl12orclassignment_ta",
    "tablespace_name": "ASSIGNMENT_TABLES",
    "total_mb": 200,
    "used_mb": 0,
    "free_mb": 198,
    "percentage_used": 0,
    "timestamp": "2017-12-31T01:58:35.241Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/17"
      }
    ]
  },
  {
    "file_id": 10,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/sysaux01.dbf",
    "tablespace_name": "SYSAUX",
    "total_mb": 1160,
    "used_mb": 1103,
    "free_mb": 55,
    "percentage_used": 95,
    "timestamp": "2017-12-31T01:58:35.257Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/10"
      }
    ]
  },
  {
    "file_id": 9,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/system01.dbf",
    "tablespace_name": "SYSTEM",
    "total_mb": 350,
    "used_mb": 345,
    "free_mb": 4,
    "percentage_used": 98,
    "timestamp": "2017-12-31T01:58:35.267Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/9"
      }
    ]
  },
  {
    "file_id": 11,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/undotbs01.dbf",
    "tablespace_name": "UNDOTBS1",
    "total_mb": 380,
    "used_mb": 195,
    "free_mb": 20,
    "percentage_used": 51,
    "timestamp": "2017-12-31T01:58:35.275Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/11"
      }
    ]
  },
  {
    "file_id": 12,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/users01.dbf"
  }...

还有html：

<div id="myDiv_{{$index}}"></div>

但是这段代码有一个错误，我不知道是什么（AngularJS noob）。图表未呈现。

控制台报如下错误：

错误：页面上不存在 ID 为“myDiv_0”的 DOM 元素。

【问题讨论】：

你试过这个<div id="myDiv_0"></div>而不是这个<div id="myDiv_{{$index}}"></div>
检查您的 HTML 输出并确保该元素存在。此外，在运行此代码之前进行测试以确保元素存在。
你能把html贴在你的div周围，id是myDiv_{{$index}}吗？我假设你应该有ng-repeat。
可能您需要调用 $scope.$apply(); 方法，因为您的代码超出了 Angular 的上下文。尝试在此行之后调用该方法$scope.datafile = response.data;

标签： javascript angularjs plotly

【解决方案1】：

首先：检查 ng-repeat 是否正在呈现您想要的 HTML。

第二：如果 HTML 按预期呈现，请尝试以下操作：

aebdApp.controller('datafileController', function ($scope, $http) {
    $http.get('http://127.0.0.1:8084/json/datafiles.json').then(function (response) {
        $scope.datafile = response.data;

        $scope.$apply(function () { // <-- This is the apply method
            $scope.datafile.items.forEach(function (i, index) {
                var data = [{
                    values: [i.used_mb, i.free_mb],
                    labels: ['Used MB', 'Free MB'],
                    type: 'pie'
                }];
                Plotly.plot('myDiv_' + index, data);
            });
        });
    });
});

【讨论】：

【解决方案2】：

错误的原因可能是当您调用Plotly.plot 时，您的视图尚未呈现，因此没有id 为myDiv_0 的div。您可以使用事件$viewContentLoaded（更多信息angular docs），如下所示：

function(response) {
    $scope.datafile = response.data;

    $scope.$on('$viewContentLoaded', function(event) { 
       // code that will be executed when this view is loaded
       $scope.datafile.items.forEach(function (i, index) {
           var data =[{
               values: [i.used_mb,i.free_mb],
               labels: ['Used MB', 'Free MB'],
               type: 'pie'
           }];
           Plotly.plot('myDiv_'+index,data);
       });
    });    
 });

或者，您可以使用 ready 并将其包装在访问 DOM 的代码（在您的情况下为 Plotlu.plot），如下所示：

angular.element(document).ready(function () {
    // Your document is ready, call Plotly.plot here
});

更多信息请查看this SO question。

【讨论】：