爲什麼我的角度數據綁定不會在視圖中更新？

我正在研究一個基本的JavaScript賽車遊戲程序，我正在嘗試使用Angular來更新視圖中的分數。我已經寫下了移動玩家的基本代碼並擁有不同的遊戲狀態。爲什麼我的角度數據綁定不會在視圖中更新？

你可以看到我是如何設置我的代碼在這裏：

出於某種原因，它沒有顯示在小提琴，但在我結束時的角度代碼會顯示爲「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，但我不確定是否正確。

讓我知道你是否有任何想法。謝謝。

來源

2014-10-03 Justin Wagner

你是對的，你應該使用'$ apply'來更新模型的值。 – khakiout 2014-10-03 04:28:31

這裏有很多問題。首先，即使找到你的控制器，你的jsfiddle也有錯誤。其次，我沒有看到你定義你的角度應用程序的位置：你的'angular.module（「App」，[]）''在哪裏？在我們到達「第三」之前，你能先解決這個問題嗎？ – 2014-10-03 05:18:39

我認爲你的問題與你如何設置你的代碼有關，而不是一個特定的語法問題。一般來說，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對於你在這樣的應用中進行的雙向綁定非常有用，所以我認爲這是最好的方式。祝你好運。

來源

2014-10-03 04:31:16 Paul

謝謝。我沒有意識到使用Angular和jQuery的問題。我會繼續嘗試，只是Angular。 – 2014-10-03 07:25:52

爲什麼我的角度數據綁定不會在視圖中更新？

回答

相關問題