title: TypeError: Cannot read property 'childNodes' of undefined angular
body: <p>I am stuck with this error, am having a custom directive for creating a bar chart, which gets generated from a json file. </p>
  
  <p>Here is my code, I have a Index.Html page, where one view is routed inside based on the navigation 
  here is the </p>
  
  <p><strong>Index.Html</strong></p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;DiginRt&lt;/title&gt;
  
      &lt;body ng-app="DiginRt" class=" pace-done" cz-shortcut-listen="true"&gt;
          &lt;div id="header-topbar-option-demo" class="page-header-topbar"&gt;
              &lt;div id="page-wrapper"&gt;
                  &lt;div id="title-breadcrumb-option-demo" class="page-title-breadcrumb"&gt;
                      &lt;div class="page-header pull-left"&gt;
                          &lt;div class="page-title"&gt; Dashboard&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="clearfix"&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="page-content" ui-view&gt; // Here i load the view for the dashboards &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src="script/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="script/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              var $j = jQuery.noConflict();
          &lt;/script&gt;
          &lt;script type="text/javascript" src="script/prototype.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/d3.js"&gt;&lt;/script&gt;
          &lt;script src="script/angular-ui-router.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/jquery.jsPlumb-1.4.1-all-min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/plumb.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Dashboard.HTML:</strong></p>
  
  <pre><code>&lt;body ng-controller="DashboardCtrl"&gt;
      &lt;div id="main_wrapper"&gt;
          &lt;div id="toolboxControl"&gt;
              &lt;div id="containerChart"&gt;
                  &lt;ul&gt;
                      &lt;li&gt; &lt;a ng-click="addWidget()" href="#controlflow"&gt;Charts&lt;/a&gt;
                          &lt;div id="controlflow" class="containerChart"&gt;
                              &lt;input ng-model="searchCommonValue" class="form-control" type="search" placeholder="Search controls..."&gt;
                              &lt;div plumb-menu-item ng-repeat="widget in dashboard.widgets | filter : searchCommonValue" class="menu-item" data-identifier="{{widget.id}}" data-title="{{widget.name}}" draggable&gt; &lt;img class="toolheader" src="{{widget.Icon}}"&gt;
                                  &lt;div class="toolcontent"&gt;{{widget.name}}&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div ng-controller="CustomWidgetCtrl" id="container" class="drop-container" ng-click="addEvent($event)" droppable&gt;
              &lt;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}}"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-header"&gt;
                          &lt;h3&gt;{{ widget.name }}&lt;/h3&gt;
                          &lt;div class="box-header-btns pull-right"&gt; &lt;a title="settings" ng-click="openSettings(widget)"&gt;&lt;i class="glyphicon glyphicon-cog"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a title="Remove widget" ng-click="remove(widget)"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="box-content"&gt;
                          &lt;!--  &lt;bars data="40,4,55,15,16,33,52,20"&gt;&lt;/bars&gt; --&gt;
                          &lt;bargraph id="d3bar" datajson="sample.json" xaxis-name="Year" xaxis-pos="905" yaxis-name="Frequency" yaxis-pos="12" d3-format=".0%"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>App.Js:</strong></p>
  
  <pre><code> 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 = "&lt;div id='" + attrs.id + "' &gt;&lt;/div&gt;"; // 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!
           }
       }
   });
  </code></pre>