Make Phaser and AngularJS work together

[ketys]

Hi, I've got a following problem. I've got a main index.html template, where is placed:

...<script src="js/game/game.js"></script>...<div ng-view></div>...

On the game page, my template looks similar to this:

<div class="jumbotron text-center"><h1>Game Page ou Yeah!</h1><div id="game-canvas"></div></div>

And at last, in my game.js file is only one row with: var game = new Phaser.Game('100', '100', Phaser.AUTO, 'game-canvas');
My problem lies in that the phaser object is displaying on every page and outside the game-canvas div. I would like to place it only on game page in #game-canvas. How can I do this? Thanks for answers!

 

[Akshar Patel]

What's happening here is that before the Angular Application gets bootstrapped, there is no div with id of 'game-canvas'. Hence, when game.js is loaded, it can't find the specific div and so it creates the Phaser game outside the required div. One possible solution is that you include the game logic in the controller or scope in which the template resides. Or, try loading the script in the template itself. Hope this helps.

[jdnichollsc]

You need to use an Angular directive, check my example! http://market.ionic.io/plugins/ionphaser

Regards, Nicholls