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中重现该问题并链接到该问题，以增加获得帮助的机会。当你重现这个问题时，你可能会自己弄明白。：）

路由到查看throws错误：TypeError：无法读取未定义的属性'childNodes'

1 个答案: