Question

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

您可以在此处查看我如何设置代码：

出于某种原因，它并没有出现在小提琴中，但在我的结尾处，角度代码将显示＆＃34; 0＆＃34;每个分数。如果我将$ scope.score_one或者两个更改为＆＃34; hello＆＃34;之类的单词＆＃34; hello＆＃34;将出现在它的位置。目前，我将{{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库？

是的，当应用程序正在＆gt;引导时，Angular可以使用jQuery。如果你的脚本路径中没有jQuery，Angular会回退到我们称之为jQLite的jQuery子集的自己的＆gt;实现。

Angular 1.3仅支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能与＆gt; Angular一起正常工作，但我们不保证。

我看到你正在使用带有Angular 1.2.15的jQuery 1.11，所以你可以选择“可能”正常工作类别。如果我是你，我会选择其中一种工具并继续使用它。

最后，如果你要使用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非常适合您在这样的应用程序中进行的双向绑定，所以我认为这是最好的方法。祝好运。

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

1 个答案: