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

Question

我正在研究一个基本的JavaScript赛车游戏程序，我正在尝试使用Angular来更新视图中的分数。我已经写下了移动玩家的基本代码并拥有不同的游戏状态。

你可以看到我是如何设置我的代码在这里：

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

出于某种原因，它没有显示在小提琴，但在我结束时的角度代码会显示为“0”每个分数。如果我将$ scope.score_one或两个更改为“hello”之类的字词，则会显示“hello”一词。目前，我已将{{score_one}}和{{score_two}}设置为player1.score和player2.score。无论数字最初设置为什么会显示（0）。当玩家获胜并且玩家的分数成功更新时，视图中的分数不会更新。

这是我的js文件的一部分; Player对象和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; 
} 

而且这里是我做的数据绑定在html文件：

<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> 

所以，我想知道如果我有什么不对的范围，以及为什么分数没有正确更新。我确实有角度链接，我正在尝试使用正确更新视图的输入字段，但由于某些原因，这不起作用。我查看$ apply并在$ apply（）中尝试了$ scope.score_one，但我不确定是否正确。

让我知道你是否有任何想法。谢谢。

Answer 1

我认为你的问题与你如何设置你的代码有关，而不是一个特定的语法问题。一般来说，jQuery和Angular不能很好地融合在一起。来自Angular文档：

Angular使用jQuery库吗？

是的，如果应用程序>自举时，Angular可以使用jQuery。如果你的脚本路径中没有jQuery，那么Angular会回到它自己的>实现我们称之为jQLite的jQuery子集。

Angular 1.3只支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能可以正常使用> Angular，但我们不能保证。

我看到你正在使用jQuery 1.11和Angular 1.2.15，所以你陷入了“可能”工作正确的类别。如果我是你，我会选择其中的一种工具并使用它。最后，如果你要使用Angular，你需要首先实例化你的模块，然后定义你的控制器。像这样的东西会工作：

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

而你会建立的方式来增加分数以类似的方式。总之，我会把所有东西都保存在Angular中，甚至不要去想jQuery。 Angular对于你在这样的应用中进行的双向绑定非常有用，所以我认为这是最好的方式。祝你好运。