2015-12-14 55 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

现在有道理。我每天都会学到新的东西。 –