TypeError：无法读取未定义角度的属性“childNodes”答案

【问题标题】：TypeError: Cannot read property 'childNodes' of undefined angularTypeError：无法读取未定义角度的属性“childNodes”
【发布时间】：2015-02-18 01:57:00
【问题描述】：

我遇到了这个错误，我有一个用于创建条形图的自定义指令，它是从 json 文件生成的。

这是我的代码，我有一个 Index.Html 页面，其中一个视图根据导航在内部路由这是

Index.Html

<head>
    <title>DiginRt</title>

    <body ng-app="DiginRt" class=" pace-done" cz-shortcut-listen="true">
        <div id="header-topbar-option-demo" class="page-header-topbar">
            <div id="page-wrapper">
                <div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
                    <div class="page-header pull-left">
                        <div class="page-title"> Dashboard</div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="page-content" ui-view> // Here i load the view for the dashboards </div>
            </div>
        </div>
        </div>
        <script src="script/jquery-1.10.2.min.js"></script>
        <script src="script/jquery-ui.js"></script>
        <script type="text/javascript">
            var $j = jQuery.noConflict();
        </script>
        <script type="text/javascript" src="script/prototype.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
        <script type="text/javascript" src="script/d3.js"></script>
        <script src="script/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="script/jquery.jsPlumb-1.4.1-all-min.js"></script>
        <script type="text/javascript" src="script/plumb.js"></script>
        <script type="text/javascript" src="script/app.js"></script>
    </body>

</html>

仪表板.HTML：

<body ng-controller="DashboardCtrl">
    <div id="main_wrapper">
        <div id="toolboxControl">
            <div id="containerChart">
                <ul>
                    <li> <a ng-click="addWidget()" href="#controlflow">Charts</a>
                        <div id="controlflow" class="containerChart">
                            <input ng-model="searchCommonValue" class="form-control" type="search" placeholder="Search controls...">
                            <div plumb-menu-item ng-repeat="widget in dashboard.widgets | filter : searchCommonValue" class="menu-item" data-identifier="{{widget.id}}" data-title="{{widget.name}}" draggable> <img class="toolheader" src="{{widget.Icon}}">
                                <div class="toolcontent">{{widget.name}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div ng-controller="CustomWidgetCtrl" id="container" class="drop-container" ng-click="addEvent($event)" droppable>
            <div plumb-item class="item" style="margin: 20px; top: 60px; left: 200px; height: 300px; width: 500px;" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}">
                <div class="box">
                    <div class="box-header">
                        <h3>{{ widget.name }}</h3>
                        <div class="box-header-btns pull-right"> <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> </div>
                    </div>
                    <div class="box-content">
                        <!--  <bars data="40,4,55,15,16,33,52,20"></bars> -->
                        <bargraph id="d3bar" datajson="sample.json" xaxis-name="Year" xaxis-pos="905" yaxis-name="Frequency" yaxis-pos="12" d3-format=".0%">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </span>
    </div>

App.Js：

 var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ui.router']);
 routerApp.config(function($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.otherwise('/dashboard');
     $stateProvider.state('dashboard', {
         url: '/dashboard',
         templateUrl: 'Charts.html',
         controller: 'DashboardCtrl'
     })
 });
 routerApp.controller('DashboardCtrl', ['$scope', '$timeout',
     function($scope, $timeout) {
         $scope.gridsterOptions = {
             margins: [20, 20],
             columns: 4,
             draggable: {
                 handle: 'h3'
             }
         };
         $scope.dashboards = {
             '1': {
                 id: '1',
                 icon: 'images/icons/chart_line.png',
                 name: 'Home',
                 widgets: [{
                     col: 0,
                     row: 0,
                     sizeY: 1,
                     sizeX: 1,
                     icon: 'images/icons/chart_line.png',
                     name: "Stocks per store"
                 }]
             }
         };
     }
 ])
 routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal',
     function($scope, $modal) {
         $scope.remove = function(widget) {
             $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
         };
         $scope.openSettings = function(widget) {
             $modal.open({
                 scope: $scope,
                 templateUrl: 'chart_settings.html',
                 controller: 'chartSettingsCtrl',
                 resolve: {
                     widget: function() {
                         return widget;
                     }
                 }
             });
         };
     }
 ])
 var BarGraph = Class.create({
     initialize: function(datajson, xaxisName, xaxisPos, yaxisName, yaxisPos, d3Format) {
         this.datajson = datajson;
         this.xaxisName = xaxisName;
         this.xaxisPos = xaxisPos;
         this.yaxisName = yaxisName;
         this.yaxisPos = yaxisPos;
         this.d3Format = d3Format;
     },
     workOnElement: function(element) {
         this.element = element;
     },
     generateGraph: function() {
         //d3 specific coding
         var margin = {
                 top: 20,
                 right: 20,
                 bottom: 30,
                 left: 40
             },
             width = 960 - margin.left - margin.right,
             height = 500 - margin.top - margin.bottom;
         var formatPercent = d3.format(this.d3Format);
         var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
         var y = d3.scale.linear().range([height, 0]);
         var xAxis = d3.svg.axis().scale(x).orient("bottom");
         var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
         var svg = d3.select(this.element).append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
         d3.tsv(this.datajson, function(error, data) {
             if (error) return console.warn(error);
             //console.log(this.xaxisName);
             x.domain(data.map(function(d) {
                 return d.letter;
             }));
             y.domain([0, d3.max(data, function(d) {
                 return +d.frequency;
             })]);
             svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).append("text").attr("x", this.xaxisPos).attr("dx", ".71em").style("text-anchor", "end").text(this.xaxisName);
             svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", this.yaxisPos).attr("dy", ".71em").style("text-anchor", "end").text(this.yaxisName);
             svg.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) {
                 return x(d.letter);
             }).attr("width", x.rangeBand()).attr("y", function(d) {
                 return y(d.frequency);
             }).attr("height", function(d) {
                 return height - y(d.frequency);
             });
         }.bind(this));
     }
 });
 routerApp.directive('bargraph', function() { // Angular Directive
     return {
         restrict: 'EA', // Directive Scope is Element
         replace: true, // replace original markup with template 
         transclude: false, // not to copy original HTML DOM
         compile: function(elem, attrs) { // the compilation of DOM is done here.
             // It is responsible for produce HTML DOM or it returns a combined link function
             // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
             console.log(attrs.id);
             console.log(attrs.datajson);
             var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
             var newElem = $(html);
             elem.replaceWith(newElem); // Replacement of the element.
             var ourGraph = new BarGraph(attrs.datajson, attrs.xaxisName, attrs.xaxisPos, attrs.yaxisName, attrs.yaxisPos, attrs.d3Format);
             ourGraph.workOnElement('#' + attrs.id);
             // Work on particular element
             ourGraph.generateGraph(); // here is the error!
         }
     }
 });

【问题讨论】：

标签： javascript angularjs html d3.js

【解决方案1】：

您的 html 和脚本中缺少一些角度代码。我做了几件事：

在 html 页面中添加了<html ng-app="routerApp">
在js文件中添加var routerApp = angular.module('routerApp', []);

我用结果创建了一个PLUNK。与您的代码唯一不同的是，我更容易找到 TSV 示例文件，而不是您在代码中引用的 JSON 文件。所以，我从d3.json 更改为d3.tsv，但这在这里真的不重要。我希望这会有所帮助。

【讨论】：

我已经添加了 ng-app ，我的 html 代码有点不同。是因为这个吗？
这是我所做的仅有的 2 处代码更改（除了 TSV）。我唯一做的另一件事是在 html 中指定必要的库（原型、D3 和 Angular）。没有角度库可能会导致您看到的角度未定义。检查我创建的 plunk。
我已经定义了所有必要的库，问题是当我构建一个单独的应用程序时它可以工作，当我嵌入一个视图时它不起作用
这些细节应该是原始问题的一部分。我建议您编辑您的问题以获得所有必要的解释和完整的代码（嵌入式视图）。
我已经修改了问题，你现在可以检查一下

【解决方案2】：

在整个 HTML 中都有多余的、未封闭的和错误的标签，Angular 似乎在努力解析。我建议检查您的 HTML 的有效性，因为这将解决您遇到的问题。

如果您需要示例，我可以提供一些，请在 cmets 中告诉我。

【讨论】：

【解决方案3】：

我之前遇到过这些问题，这与将替换选项设置为 true 的指令有关。因此，在特定情况下检查您是否真的需要替换选项可能是一个想法。

【讨论】：