2015-11-27 69 views
0

我在Angular.js中做了一個小測驗App。 如果使用JSON文檔選擇的答案是對的或錯的,我使用ng-click函數進行測試。當我點擊anwser並決定更改(true爲false或false爲true)時,我收到了與Google Chrome瀏覽器斷開連接的已檢測目標。檢查目標斷開角度

我試圖使用沒有任何擴展名的谷歌瀏覽器。

的index.html

<!DOCTYPE html> 
<html ng-app="quizApp" lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Quiz</title> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script> 
    <script src="app/app.js"></script> 
    <script src="app/quizCtrl.js"></script> 
</head> 
<body> 
    <div class="main"> 
     <div ng-view></div> 
    </div> 
</body> 
</html> 

app.js

var app = angular.module('quizApp', ['ngRoute']) 

angular.module('quizApp').config(['$routeProvider', function($routeProvider) { 

    var routes = [ 
     { 
      url: '/home', 
      template: 'templates/quiz.html', 
      controller: 'quizCtrl' 
     } 
    ]; 

    routes.forEach(function(r, index) { 
     $routeProvider.when(r.url, { templateUrl: r.template, controller: r.controller}); 
    }); 

    $routeProvider.otherwise({ redirectTo : '/home' }); 
}]); 

quizCtrl.js

app.controller('quizCtrl', function($scope, $http) { 
    $scope.responses = 
     $http({ 
      method : 'GET', 
      url : './data/quiz.json' 
     }).then(function successCallBack(data) { 
      $scope.datas = data.data; 
     }, function errorCallback(data) { 
      console.log("Error"); 
     }); 
    $scope.result = []; 
    $scope.isTrue = function(response) { 
     $scope.json = angular.fromJson(response); 
     if ($scope.result.length == 0) { 
      if($scope.json.isTrue) { 
         $scope.result.push($scope.json.id, true); 
        } 
        else { 
         $scope.result.push($scope.json.id, false); 
        } 
     } 
     else { 
      console.log($scope.result.length); 
      for (var i = 0; i < $scope.result.length; i++) { 
       if ($scope.result[i] == $scope.json.id) { 
        $scope.result.splice(i, 2); 
        if($scope.json.isTrue) { 
          $scope.result.push($scope.json.id, true); 
         } 
         else { 
          $scope.result.push($scope.json.id, false); 
         } 
       } 
       else { 
        if ($scope.result[i] == true || $scope.result[i] == false) { 
         console.log("do nothing " + i); 
        } 
        else { 
         if($scope.json.isTrue) { 
          $scope.result.push($scope.json.id, true); 
         } 
         else { 
          $scope.result.push($scope.json.id, false); 
         } 
        } 
       } 
      } 
     } 
     console.log($scope.result); 
    } 
}); 

我相信在我的代碼的bug應該在這部分代碼(因爲它在quizCtrl.js中的第23行之後崩潰

for (var i = 0; i < $scope.result.length; i++) { 
    if ($scope.result[i] == $scope.json.id) { 
     $scope.result.splice(i, 2); 
     if($scope.json.isTrue) { 
      $scope.result.push($scope.json.id, true); 
     } 
     else { 
      $scope.result.push($scope.json.id, false); 
     } 
    } 
    else { 
     if ($scope.result[i] == true || $scope.result[i] == false) {    
      console.log("do nothing " + i); 
     } 
     else { 
      if($scope.json.isTrue) { 
       $scope.result.push($scope.json.id, true); 
      } 
      else { 
       $scope.result.push($scope.json.id, false); 
      } 
     } 
    } 
} 

回答

0

我認爲你的具體問題是,你使用$scope.result.length迭代結果,然後在循環內推送到該數組。如果註釋掉for循環中的4行,並將其推入數組,它不會中斷。所以我認爲推動你迭代的結果數組會導致問題。

This可能會幫助你。

當您通過瀏覽器開發某個網頁或某個CORS請求時,出現「檢查錯誤斷開連接錯誤」,並且您嘗試訪問的文件太大,瀏覽器無法處理或插件干擾我們的程序(一個我們正在發展)。

解決方案: 嘗試禁用所有插件或涉及允許CORS或禁用提供相同功能的插件(例如,您可能有2-3個插件完成允許CORS干擾的相同作業)。 檢查您正在訪問的文件(當然,只有在您開發一些Web服務,應用程序或某些Web開發時,纔可以檢出該文件,以便該文件將在本地存在)。

+0

我正在使用WAMP在我的本地項目中使用ng-route。那是你在說什麼? –

+0

WAMP不應該有所作爲,你有沒有一個很好的例子? – user1532669

+0

http://plnkr.co/edit/uxHHguOUw58NNsq8oQkG?p=preview是你需要的嗎?從來沒有做過之前 –