2015-12-14 54 views
1

我正在使用codepen構建一個tic tac腳趾遊戲。當我嘗試console.log $scope它告訴我它沒有被定義。我相信我擁有所有正確的語法。這裏的codepen鏈接http://codepen.io/theMugician/pen/XXbgBX

var app = angular.module("ticTacToe", []); 
app.controller("MainCtrl", ['$scope', function($scope){ 
    var cell = $(".square"); 

    $scope.player = ""; 
    $scope.AI = ""; 
    $scope.result = ""; 

    /*** Choose a shape ***/ 
    $scope.choosePlayer = function(e) { 
    $scope.player = $(e.currentTarget).text(); 
    $('.choose').css('top', '-2000px'); 
    $('#wrapper').css('top', '-600px'); 
    $('#wrapper').css('opacity', '1'); 
    if($scope.player === "X"){ 
     $scope.AI = "O"; 
    }else if($scope.player === "O"){ 
     $scope.AI = "X"; 
    } 
    } 

    /*** Shape Cells ***/ 
    $scope.cells = [ { value: '', disabled: false }, 
        { value: '', disabled: false }, 
        { value: '' , disabled: false}, 
        { value: '' , disabled: false }, 
        { value: '' , disabled: false}, 
        { value: '', disabled: false } , 
    { value: '' , disabled: false}, { value: '', disabled: false }, 
        { value: '' , disabled: false} 
    ]; 
    // made a ref to scope cells 
    $scope.emptyCells = $scope.cells; 
    $scope.filledCells = ''; 

    /*** Make a move ***/ 
    $scope.move = function(cell){ 
    cell.value = $scope.player; 
    cell.disabled = true; 
    var round = 0; 
    function hasValue(element) { 
     return element.value === ""; 
    } 
    //check if all cells are filled 
     if($scope.cells.some(hasValue)){ 
     round = 0; 
     }else{ 
     round = 1; 
     $scope.filledCells = $scope.cells; 
     } 
    //AI makes a move 
    while(round < 1){ 
    // filtered to get only available cells (for performance) 
     $scope.emptyCells = $scope.cells.filter(function(cell){ 
     return cell.value === ''; 
     }); 
     // got random cell according to empty cells 
     var randomCell = $scope.emptyCells[Math.floor((Math.random()*($scope.emptyCells.length-1))+1)]; 
     if(randomCell.value === ""){ 
     randomCell.value = $scope.AI; 
     randomCell.disabled = true; 
     round = 1; 
     }else{ 
     round = 0; 
     } 
    } 
    $scope.checkResults(); 
    }; 

    $scope.checkDraw = function() { 
    if($scope.filledCells && $scope.checkWinner.status === false){ 
     return true; 
    }else{ 
     return false; 
    } 
    } 

    $scope.checkWinner = function() { 
    var allCells = $scope.cells; 
    var cell = allCells.value; 
    var status = false; 
    var winningCell = cell; 
    if (
     (cell[0] == cell[1] && cell[1] == cell[2]) || 
     (cell[3] == cell[4] && cell[4] == cell[5]) || 
     (cell[6] == cell[7] && cell[7] == cell[8]) || 
     (cell[0] == cell[3] && cell[3] == cell[6]) || 
     (cell[1] == cell[4] && cell[4] == cell[7]) || 
     (cell[2] == cell[5] && cell[5] == cell[8]) || 
     (cell[0] == cell[4] && cell[4] == cell[8]) || 
     (cell[2] == cell[4] && cell[4] == cell[6]) 
     ) { 
      status = true; 
      winningCell = cell; 
     } else { 
      status = false; 
     } 
     return { 
     status: status, 
     winner: winningCell 
     } 
} 

    //checks if values are the same 
    $scope.checkResults = function(){ 
    var winner = $scope.checkWinner.winner; 
    if($scope.checkWinner.status){ 
     $('#resultsWrapper').css('top', '-600px'); 
     $('#resultsWrapper').css('opacity', '1'); 
     $scope.result = winner + " is the winner"; 
     $scope.reset(); 
    } 
    if($scope.checkDraw){ 
     $('#resultsWrapper').css('top', '-600px'); 
     $('#resultsWrapper').css('opacity', '1'); 
     $scope.result = "It's a tie"; 
     $scope.reset(); 
    } 
    } 

$scope.reset = function(){ 
    $scope.cells = [ { value: '', disabled: false }, 
        { value: '', disabled: false }, 
        { value: '' , disabled: false}, 
        { value: '' , disabled: false }, 
        { value: '' , disabled: false}, 
        { value: '', disabled: false } , 
    { value: '' , disabled: false}, { value: '', disabled: false }, 
        { value: '' , disabled: false} 
    ]; 
} 
}]); 
+4

哪裏?哪一行的$ scope是未定義的? –

+2

不要只是粘貼你的代碼,解釋你的問題,或只是揭示方法在哪裏是你的問題。我看到沒有console.log – Alexandre

+0

在谷歌瀏覽器開發人員工具中,我輸入'$ scope'到控制檯,它給了我'未捕獲的ReferenceError:$ scope沒有被定義。另一方面,當我將'console.log($ scope);'插入到我的腳本中時,它會使用它的值記錄$ scope。這是爲什麼? –

回答

2

In google chrome developer tools I enter $scope into the console and it gives me Uncaught ReferenceError: $scope is not defined. On the other hand when I insert console.log($scope); into my script it logs $scope with it's value. Why is that?

當您輸入「$範圍到控制檯」你檢查你的角碼內的一個斷點坐或它坐在那裏閒置在頁面上時?

$ scope只能在Angular代碼中的「範圍內」時纔可以檢查....不能在斷點處鍵入$ scope。

+1

現在有道理。我每天都會學到新的東西。 –