Question

<html >
   <head>
      <meta charset="utf-8">
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <title>Project IoT -- CAN Arduino </title>
      <!--					SPEEDOMETER					-->
      <link href="css/speedometer.css" rel="stylesheet">
      
      <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Play:700,400' type='text/css'>
      <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
      <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
      <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
      <script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>
	  
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="js/speedometer.js"></script>
	
	  
      <!-- TESTING SERIAL PORT-->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
      <script src="socket.io/socket.io.js"></script>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
	  
	  
	  
	  
	  
	  
	  
      <script>
         var app = angular.module('myApp', ['zingchart-angularjs']);
         var socket = io();
         
         app.controller('appCltr', ['$scope',function($scope){
         $scope.myJson = {
           type : 'line',
           series : [
             { values : [0,1] },
             { values : [0,1] }
           ]
         };
              	socket.on('port', function(port){
         		$scope.$apply(function(){
         		$scope.data = port;
         		console.log(port);
         		});
         	});
         	
         	socket.on('engine', function(engine){
         		$scope.$apply(function(){
         		$scope.engine = engine;
            graphupdate(engine[0].value,engine[1].value);
         		console.log(engine);
         
         
       		 //ShowClusterRPMData
			 update(engine[0].value);
         
         
         		});
         	});
         
         function graphupdate(data,tempdata){
         $scope.myJson.series[0].values.push(data/100);
         $scope.myJson.series[1].values.push(tempdata);
         }
         }]);
		 
		 
		 
		 function update(data){
			 console.log("FUNKTION IM HTML!")
			 try {
	             segDisplay.value(data/10);
	             gauge.value(data/10);
			 }
			 catch(err) {
				 console.log("ERROR");
				 console.log(err);
			 }
             
		 }
      </script>
		 
		 
       
		 
   </head>
   <body>
      <!-- Header -->
     .....
 <script>
    var svg = d3.select("#speedometerrpm")
            .append("svg:svg")
            .attr("width", 400)
            .attr("height", 400)
    .attr('style',  'background-color:#515151');
    
    var gauge = iopctrl.arcslider()
            .radius(120)
            .events(false)
            .indicator(iopctrl.defaultGaugeIndicator);
    gauge.axis().orient("in")
            .normalize(true)
            .ticks(12)
            .tickSubdivide(3)
            .tickSize(10, 8, 10)
            .tickPadding(5)
            .scale(d3.scale.linear()
                    .domain([0, 6000])
                    .range([-3*Math.PI/4, 3*Math.PI/4]));
    
    var segDisplay = iopctrl.segdisplay()
            .width(80)
            .digitCount(6)
            .negative(false)
            .decimals(0);
    
    svg.append("g")
            .attr("class", "segdisplay")
            .attr("transform", "translate(130, 200)")
            .call(segDisplay);
    
    svg.append("g")
            .attr("class", "gauge")
            .call(gauge);
 </script>
   </body>
</html>

如果我尝试将第二个脚本部分放到一个额外的文件中，它会在HTML中的第一个脚本部分开始之前打开js文件。但是这个错误出现在控制台上。（来自我在html脚本第1部分中的try catch块）

TypeError: Cannot read property 'each' of undefined
at Function.segdisplay.value (iopctrl.js:853)
at update (Engine:80)
at Engine:63
at b.$eval (angular.js:17958)
at b.$apply (angular.js:18058)
at r.<anonymous> (Engine:56)
at r.emit (index.js:133)
at r.onevent (socket.js:270)
at r.onpacket (socket.js:228)
at r.<anonymous> (index.js:21)

任何人都有任何想法？不希望在html文件中有这么多的javascript。

当脚本在html

中时，一切正常

尝试将脚本提取到额外的js文件

0 个答案: