路由查看抛出错误：类型错误：无法读取属性“的childNodes”的未定义

Question

这是我在那里我试图用一个视图“选项”主HTML：

<div class="container-fluid" > 
      <div class="row" > 
       <div class="col-sm-3 col-md-2 sidebar"> 
        <ul class="nav nav-sidebar"> 
         <li><a href="#/overview">Overview</a></li> 
         <li><a href="#/options">Options</a></li> 
         <li><a href="#/charts">Charts</a></li> 
        </ul> 

       </div> 
      </div> 
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view=""> 
       <!-- Place for the views --> 

      </div> 

    </div> <!-- Container-fluid --> 

但是，当我点击相应的锚点，我得到一个错误消息。

TypeError: Cannot read property 'childNodes' of undefined 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:36) 
at nodeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4400:24) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4015:15) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:13) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:13) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:13) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:13) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:13) 
at compositeLinkFn (http://localhost/jqPlots/lib/js/angular.js:4018:13) 
at publicLinkFn (http://localhost/jqPlots/lib/js/angular.js:3920:30) 

这是脚本：

<script type="text/javascript"> 

    var VizApp = angular.module('VizApp', []); 

    VizApp.config(function($routeProvider){ 

     $routeProvider 
      .when('/overview',{ 
        controller : 'VizController', 
        templateUrl : 'views/overview.html' 
      }) 
      .when('/options', { 
       controller : 'VizController', 
       templateUrl : 'views/options.html' 
      }) 
      .when('/charts', { 
       controller : 'VizController', 
       templateUrl : 'views/charts.html' 
      }) 
      .otherwise({redirectTo : '/overview'}) 
    }); 

    var controllers = {}; 

    controllers.VizController = function($scope, $http){ 

     $("#yAxisVarDD").select2({placeholder : "Select Y Variable"}); 

     $scope.metrics= ['mean','sum','min','max']; 

     var headers = []; 
     var varType = []; 
     var records = []; 


     var csvPath; 

     $scope.getCsv = function(that){ 

      csvPath = 'csvs/' + that[0].files[0].name; 
      $http({method: 'GET', url: csvPath}). 
       success(function(data, status, headers, config) { 
        processData(data); 
       }). 
       error(function(data, status, headers, config) { 
      }); 
     }; 

     function processData(allText) { 
      var allTextLines = allText.split(/\r\n|\n/); 
      headers = allTextLines[0].split(','); 
      var previewSize = 10; 

      $.each(allTextLines[1].split(','),function(i,value){ 
       varType.push({ var : headers[i] , 
          type : isNaN(value) ? (isNaN(Date.parse(value)) ? "Character" : "Date") : "Numeric" 
       }); 

      }); 

      $.each(allTextLines.slice(1,allTextLines.length), function(i,thisRecord){ 
       records[i] = thisRecord.split(','); 
      }); 

      $scope.headers = headers; 
      $scope.varType = varType; 
      $scope.records = records; 

     } 


    }; 

    VizApp.controller(controllers); 
</script> 

这是我options.html

<div id="optionsPage" > 
<div class="varContainer cell" style="display:block"> 
    <h2 class="sub-header ">Variable Selection</h2> 
    <div class="panel panel-default inline" > 
     <div class="panel-heading"> 
      <h4 class="panel-title">Y-Axis</h4> 
     </div> 
     <div class="panel-body inline" > 
      <div class="inline selection-group" > 
       <p class="inline">       
        <select id="yAxisMetricDD" data-ng-options="metric for metric in metrics"> 
         <option></option>          
        </select><br> 
       </p>       
      </div> 
     </div> 
     </div>  
    </div> 
</div> 

我无法弄清楚什么是创造这个错误。此外，我正在使用的选择组件不显示选项。这两个可能有关系。请帮助。 谢谢。

Answer 1

这可能是JS中的“yAxisVarDD”与HTML中的“yAxisMetricDD”之间的不匹配？

如果不是，请在http://jsfiddle.net中重现问题并链接到该问题，以增加获得帮助的可能性。在您重现问题时，您可能会自己想出来。 :)