2
我在製作Yahtzee SPA。這是我的js文件作用域變量不會在ajax發佈請求後發生變化
var game = angular.module('yahtzee',[]);
game.controller('RollDicesController', function($scope, $http) {
$scope.img1 = "style/img/dice1.jpg";
$scope.img2 = "style/img/dice2.jpg";
$scope.img3 = "style/img/dice3.jpg";
$scope.img4 = "style/img/dice4.jpg";
$scope.img5 = "style/img/dice5.jpg";
$scope.result = {
Ones : '0',
Twos : '0',
Threes : '0',
Fours : '0',
Fives : '0',
Sixes : '0',
ThreeOfAKind : '0',
FourOfAKind : '0',
FullHouse : '0',
SmallStraight : '0',
LargeStraight : '0',
Chance: '0',
Yahtzee : '0'
};
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
$scope.rollDices = function() {
$dice1 = Math.floor((Math.random() * 6) + 1);
$dice2 = Math.floor((Math.random() * 6) + 1);
$dice3 = Math.floor((Math.random() * 6) + 1);
$dice4 = Math.floor((Math.random() * 6) + 1);
$dice5 = Math.floor((Math.random() * 6) + 1);
$scope.img1 = "style/img/dice" + $dice1 + ".jpg";
$scope.img2 = "style/img/dice" + $dice2 + ".jpg";
$scope.img3 = "style/img/dice" + $dice3 + ".jpg";
$scope.img4 = "style/img/dice" + $dice4 + ".jpg";
$scope.img5 = "style/img/dice" + $dice5 + ".jpg";
$http.post('calculate', {'dice1': $dice1, 'dice2': $dice2, 'dice3': $dice3, 'dice4': $dice4, 'dice5': $dice5 }).success(function(data) {
$scope.result = data;
}).error(function(data, status) {
$scope.errors.push(status);
});
};
});
請求所做的幾乎屬性值的相應移動。我有一個連接到calculate路線（我使用Laravel）的php控制器，可以完成所有的數學工作。 現在的問題是，雖然我正確接收值（我測試過），但我的表並未更新。
我已經在我的網頁主要的div已定義控制器：
<div ng-controller="RollDicesController">
<div id="game_div">
<div id="dice_div">
<ul>
<li style="list-style-type: none;" class="listaDados" >
<img id="dice1" ng-src="{{img1}}">
<img id="dice2" ng-src="{{img2}}" >
<img id="dice3" ng-src="{{img3}}" >
<img id="dice4" ng-src="{{img4}}" >
<img id="dice5" ng-src="{{img5}}" >
</li>
</ul>
<a>
<button id="rolldice_button" class= "button_class" ng-click="rollDices()">
Roll Dice!
</button>
</a>
<div id="table_div">
<table id="score_table" border="1" >
<tr ng-repeat="key in notSorted(result) track by $index" ng-init="val = result[key]">
<td> {{ key }} </td>
<td> {{ val }} </td>
</tr>
</table>
</div>
</div>
，由於某種原因，該表永遠不會改變，雖然$scope.result和骰子圖像做。
我真的不明白我做錯了什麼，所以我需要你的幫助。
編輯1：我發現，刪除此之後：
$scope.result = {
Ones : '0',
Twos : '0',
Threes : '0',
Fours : '0',
Fives : '0',
Sixes : '0',
ThreeOfAKind : '0',
FourOfAKind : '0',
FullHouse : '0',
SmallStraight : '0',
LargeStraight : '0',
Chance: '0',
Yahtzee : '0'
};
我按下按鈕和它的工作一次，下面的點擊並沒有改變表。 出於某種原因，我給了$scope.result一個值後，它的值再也不會改變。由於我對AngularJS知識是有限的，我不知道爲什麼會這樣
編輯2：我試着改變使用$ scope.apply（）的要求，這樣
$http.post('calculate', {'dice1': $dice1, 'dice2': $dice2, 'dice3': $dice3, 'dice4': $dice4, 'dice5': $dice5 }).success(function(data) {
$scope.result = data;
$scope.apply();
}).error(function(data, status) {
$scope.errors.push(status);
});
編輯3： $scope.$apply寫在我以前的編輯不當，並糾正它之後，它現在給我看這個錯誤
Error: error:inprog Action Already In Progress $digest already in progress
最後編輯：$超時工作，問題是使用notSorted功能。
表現在已經創建這樣的：
<div id="table_div">
<table id="score_table" border="1" >
<tr ng-repeat="(key, val) in result track by $index">
<td> {{ key }} </td>
<td> {{ val }} </td>
</tr>
</table>
</div>
雖然它不是我想要的方式排序，至少它的作品。
爲什麼你需要的'notSorted（）'函數？在ajax調用上使用承諾，並將結果模型附加到中繼器上 –
@LozCheroneツ你能舉一個例子說明如何做到這一點嗎？我是相當新的AngularJS – eisen46
@LozCheroneツ我找到了另一種方法來排序表 – eisen46