Why are my angular views not data bound in the view?
I am working on a basic JavaScript racer program and I am trying to use Angular to update a score in a view. I wrote some basic code to move players around and have different game states.
You can see how I set up my code here:
http://jsfiddle.net/ey8dk22r/1/
For some reason it doesn't appear in the fiddle, but at my end, the Angular code will show "0" for each score. If I change $ scope.score_one or two to something like "hello", the word "hello" appears instead. I currently have {{score_one}} and {{score_two}} set to player1.score and player2.score. Whatever the number initially set will display (0). When the player wins and the player's score is successfully updated, the score in the view is not updated.
Here is part of my js file; Player object and control counter:
function Player(element_id, name){
this.el = $(element_id).selector;
this.position = 1;
this.name = name;
this.score = 0;
this.check = function(){
if ($(this.el + ' td:last-child').hasClass("active")){
this.score += 1;
$(".winner").html("<h2>" + this.name + " wins!</h2>")
game = false;
$(".reset").show();
}
}
this.move = function(position){
$(this.el + ' td').removeClass('active');
$(this.el + ' td:eq(' + (this.position) + ')').addClass("active");
this.check();
this.position += 1;
}
}
function scoreController($scope){
$scope.score_one = player1.score;
$scope.score_two = player2.score;
}
And this is where I do the data binding in the html file:
<div class="container" ng-app="" ng-controller="scoreController">
<h1>A Day at the Races</h1>
<ol>
<li ng-model="score_one">Mew: {{ score_one }}</li>
<li ng-model="score_two">Celebi: {{ score_two }}</li>
</ol>
So, I am wondering if I have something wrong in scope and why the score is not updating correctly. I linked Angular correctly and I was trying to do something with the input fields that were updating the view correctly, but for some reason it doesn't work. I looked at $ apply and tried $ scope.score_one in $ apply (), but I'm not sure if I did it right.
Let me know if you have any ideas. Thank.
source to share
I think your problem has more to do with how you are setting up your code, rather than a specific syntax problem. In general, jQuery and Angular don't fit together very well. From the Angular docs:
Does Angular use the jQuery library?
Yes, Angular can use jQuery if it's present in your app when app> loads. If jQuery is missing in your script path, Angular falls back to its own> implementation of a subset of jQuery, which we call jQLite.
Angular 1.3 only supports jQuery 2.1 or higher. jQuery 1.7 and later may work correctly s> Angular, but we cannot guarantee that.
I see that you are using jQuery 1.11 with Angular 1.2.15, so you fall into the category of "maybe" to work correctly. If I were you, I would pick one of these tools and go with it.
Finally, if you need to go with Angular, you need to instantiate your module first and then define your controllers. Something like this will work:
var myAppModule = angular.module('myApp', []);
myAppModule.controller('scoreController', '$scope', function($scope) {
$scope.score_one = player1.score;
$scope.score_two = player2.score;
}
And you will build ways to increase points in the same way. In short, I would keep everything in Angular and not even think about jQuery. Angular is great for the two way bindings you do in an application like this, so I think this is the best way. Good luck.
source to share