为什么我的角度数据绑定不会在视图中更新？

Question

I am working on a basic JavaScript racer program, and I'm trying to use Angular to update the score in the view. I have written the basic code to move the players and have different game states.

You can see how I set up my code here:

http://jsfiddle.net/ey8dk22r/1/

For some reason it isn't showing up in the fiddle, but on 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" will show up in its place. Currently, I have {{ score_one }} and {{ score_two }} set to player1.score and player2.score. Whatever the number is initially set to will be what shows up (0). When a 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; the Player object and the scoreController:

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 here 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'm wondering if I have something wrong with the scope, and why the score is not correctly updating. I do correctly have angular linked and I was trying things with input fields that was correctly updating the view, but for some reason this isn't working. I looked at $apply and tried $scope.score_one in $apply(), but I'm not sure if I did that correctly.

Let me know if you have any ideas. Thank you.

Answer 1

I think your issue 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 mesh too well together. From the Angular docs:

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being >bootstrapped. If jQuery is not present in your script path, Angular falls back to its own >implementation of the subset of jQuery that we call jQLite.

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with >Angular but we don't guarantee that.

I see that you're using jQuery 1.11 with Angular 1.2.15, so you fall in that "might" work correctly category. If I were you, I would pick one of these tools and go with it.

Finally, if you are to go with Angular, you need to first instantiate your module, then define your controllers. Something like this would work:

var myAppModule = angular.module('myApp', []);
myAppModule.controller('scoreController', '$scope', function($scope) {
    $scope.score_one = player1.score;
    $scope.score_two = player2.score;
}

And you would build the ways to increment the scores in a similar fashion. In short, I would keep everything in Angular, and not even think about jQuery. Angular is great for the two way bindings that you're doing in an app like this, so I think it's the best way to go. Good luck.