我正在做 Yahtzee SPA。这是我的 js 文件
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);
});
};
});
该请求所做的几乎是相应 Action 的属性值。我有一个连接到 calculate
路由的 php Controller (我使用的是 Laravel),它可以完成所有的数学工作。
现在的问题是,尽管我正确接收了值(我已经对此进行了测试),但我的表没有更新。
我的网页中已经有一个定义了 Controller 的主 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
在我之前的编辑中写得不好,在更正它之后,它现在向我展示了这个错误
错误:错误:inprog
行动已在进行中
$digest 已在进行中
最终编辑:$timeout 有效,问题在于使用 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>
虽然它没有按照我想要的方式排序,但至少它可以工作。
最佳答案
尝试这个,推荐使用 $apply。
请注意,我在顶部注入(inject)了 $timeout。
var game = angular.module('yahtzee',[]);
game.controller('RollDicesController', function($scope, $http, $timeout) {
$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) {
$timeout(function() {
$scope.result = data;
});
}).error(function(data, status) {
$scope.errors.push(status);
});
};
});
关于javascript - ajax post请求后范围变量没有改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27753380/