Add a global variable to the scope

Question

I'm trying to build the User Interface of a game, and AngularJS seems to be perfect for that matter. All my game is inside the global variable ig. ig looks like this :

ig = { money: 100, lives: 3, ... };

I'd like to add ig.money and ig.live to the scope of the controller, so it automatically updates the UI when the variable change within the game.

I tried :

$scope.$watch('ig.money', function() { $scope.money = ig.money; });

but it doesn't work. It says that ig is null. Can someone point me in the right direction? Thank you

Answer 1

or that would be more angular way:

app.value('myGame',ig)
app.controller('AppController',[
    '$scope',
    '$window',
    function($scope,myGame) {
      $scope.ig = myGame;
    }
]);

or you could put your game in a constant or provider or factory or service

module

it's up to you choice the way that better fits your needs

Answer 2

Its not clear where and How you have defined your global variable.

Assuming that you have defined your variable as

<script type="text/javascript">
    var ig = { money: 100, lives: 3, ... };
</script>

To Access these variables in Angular controller you have to inject $window into your controller to access your window-bound variables.

app.controller('AppController',[
    '$scope',
    '$window',
    function($scope, $window) {
      $scope.ig = $window.ig;
    }
]);

Answer 3

A clean way is to put all your game data in an Angular Service which is a singleton. Any changes to the data can then be broadcasted to controllers that can act on that event. Via dependency injection you can make your service with the game data easily accessible to all controllers. There is a great blogpost that gives a straightforward example on how to do this.