$scope is not defined - codepen

Question

I am using codepen to build a tic tac toe game. When I try to console.log $scope it tells me it is not defined. I am sure I have all the right syntax. Here's the codepen link 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}  
  ];
}
}]);

Do not just paste your code, explain your problem or expose just the method where is your problem. I see no console.log — Alexandre
– Alexandre, Commented Dec 14, 2015 at 17:23
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? — Grzes Slania
– Grzes Slania, Commented Dec 14, 2015 at 17:41

Marcidius · Accepted Answer · 2015-12-14 18:14:32Z

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?

When you are entering "$scope into the console" are you inspecting that when sitting at a breakpoint within your angular code or is it sitting there idle on the page?

$scope will only be inspectable when it is "in scope" within the Angular code.... you can't type in $scope when not at a breakpoint.

answered Dec 14, 2015 at 18:14

Marcidius

2491 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

$scope is not defined - codepen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related