Databases
StackOverflow2013
Postsdbo
POHow to sync object to controller scope in this little game in Angular JS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to sync object to controller scope in this little game in Angular JS?
    primarykey
    data
    text
    <p>I've made this simple <a href="http://joao.pt/w/lab/memo/app/" rel="nofollow">pairs game</a>, stuffing all my code in <a href="http://joao.pt/w/lab/memo/app/scripts/app.js" rel="nofollow">app.js</a>. To play it, you simply have to pair up the cards on the screen: every time you do so, the <code>card</code> object is printed to the console, containing game variables such as number of moves, game timer, etc. These game variables should show up on the lower right side of the screen, but I don't seem able to pass them through the <code>CardFlipper</code> controller's <code>$scope</code>. How should I do this? Should I move my functions and object inside the controller? This is my first time using Angular JS, so please feel free to suggest a better practice or a more efficient way to do this. Here's my app.js:</p> <pre> var app = angular.module('memoApp', []); app.filter('shuffle', function() { return function(array) { var counter = array.length, temp, index; while (counter--) { index = (Math.random() * counter) | 0; temp = array[counter]; array[counter] = array[index]; array[index] = temp; } return array; } }); app.directive('card', function() { return function(scope, element) { element.bind('click', function(e) { e.preventDefault(); revealCard($(this).children('a')); console.log(card); }); } }); function CardFlipper($scope) { $scope.deck = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; $scope.card = card; }; /* Gaming */ var card = { count: 0, pair: 0, moves: 0, timer: 0 }; var timer = setInterval(function(){ card.timer++; }, 1000); var revealCard = function(picked) { if (card.count!=1) { // First move: store data card.pair = picked.data('pair'); card.count = 1; turnCard('wipe'); turnCard('flip', picked, card.pair); } else { // Second move: compare if (picked.data('pair')==card.pair) { if (!picked.hasClass('flip')) { turnCard('win', picked, picked.data('pair')); } else { turnCard('wipe'); } } else { turnCard('flip', picked, picked.data('pair')); } card.count = 2; card.moves++; } }; var turnCard = function(outcome, picked, pair) { switch (outcome) { case 'flip': picked.toggleClass('flip').html(pair); break; case 'win': picked.addClass('flip').html(card.pair); $('ul#game .flip').addClass('win'); break; case 'wipe': $('ul#game li').find('a').removeClass('flip').html(''); break; } }; </pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJoão
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CONot sure how you could pass the `card` variable around, but as I see it the 'game variables' could very well be attributes of the $rootScope. So you can provide something like a `run()`function in which you would bind the `card` var to $rootScope. The $rootScope is an attribute of any scope, so it can be easily accessed by scope.$rootScope. Doing things this way is nicer because the 'card' variable is not a global variable, but a resource which can be accessed (or even injected ) in your directive, controller, whatever
      singulars
      1. POHow to sync object to controller scope in this little game in Angular JS?
      1. USvictor
    2. COEven more on that. IMHO the `turnCard()` and `revealCard()` make more sense to be actions inside your 'CardFlipper' controller since that are exactly the actions that the controller does.
      singulars
      1. POHow to sync object to controller scope in this little game in Angular JS?
      1. USvictor
    3. CO@victor using $rootScope is definitely not best practice. A simple service , containing object of variable properties needed can be shared across the whole app. Add whatever upDate methods are needed then inject service in controllers and directives that want to share that data
      singulars
      1. POHow to sync object to controller scope in this little game in Angular JS?
      1. UScharlietfl
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload