ng-disabled在数据更改后未进行评估
reg*_*fin 3 html javascript ajax angularjs
我正在编写一个应用程序,用户可以升级使用游戏币支付的组件.按下"升级"按钮后,会向服务器发送ajax请求并升级组件.之后,我发出另一个ajax请求来检索新的组件页面.但是,当数据更新时,不会再次检查ng-disabled,因此升级按钮在不应该的情况下仍然可以点击.重新加载页面或路由修复此问题.但重新加载页面并不是一个好的用户体验.
我正在做这个项目来学习Angularjs的方法,所以如果我的设置有什么问题或者我做了什么,请告诉我!
我尝试包含所有相关代码,如果缺少某些内容,您可以在此链接下使用用户和密码"test" 查看它.
对于领先地位,在machine-overview.html该按钮的调用upgradeComponent在controller.js控制器MachineOverviewCtrl发出Ajax请求和上成功更新$scope.user和$scope.machine,改变的数据被反映在图(ng-repeat),但该按键ng-disabled不评估和保持旧状态.
我究竟做错了什么？我如何强制进行评估或以Angularjs喜欢的方式进行更新？
编辑:
@ jack.the.ripper的答案是缺少这一点,即有多个按钮,每个按钮重复一次,但这些按钮只是不评估它们的ng-disable指令.
//编辑
的index.html
<!DOCTYPE html>
<html lang="de" ng-app="hacksApp">
<head>
<!--ommited includes (angularjs, bootstrap etc)-->
</head>
<body ng-controller="hacksUserCtrl">
<!--ommited navbar-->
<div ng-view></div>
</body>
</html>
机器overview.html
<!--ommited divs-->
<table class="table table-bordered">
<!--ommited thead-->
<tbody>
<tr ng-repeat="component in machine | object2Array | orderBy:'ComponentID'"><!--converting objects to arrays, issue appears with and without filter-->
<!--ommited other irrelevant td-->
<td>
<button
ng-disabled="
{{
(component.price_next <= 0) || (component.price_next > user.values.euro) ||
(user.values.energy_remaining < (component.energy_next-component.energy))
}}"
ng-click="upgradeComponent(component)" class="btn btn-danger" role="button">
Upgrade {{component.text}} for <span class="glyphicon glyphicon-euro"></span> {{component.price_next}}
</button>
</td>
</tr>
</tbody>
</table>
<!--ommited divs-->
javascript变种及其起源:
$scope.user.x //hacksUserCtrl
$scope.machine.x //MachineOverviewCtrl
app.js
var hacksApp = angular.module('hacksApp', [
'ngRoute',
'hacksControllers',
'hacksFilters',
]);
hacksApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/machine', {
templateUrl: 'html/machine-overview.html',
controller: 'MachineOverviewCtrl',
activetab: 'machine'
}).
when('/jobs', {
templateUrl: 'html/jobs-overview.html',
controller: 'JobsOverviewCtrl',
activetab: 'jobs'
}).
when('/phones/:phoneId', {
templateUrl: 'html/phone-detail.html',
controller: 'PhoneDetailCtrl',
activetab: 'phone'
}).
otherwise({
redirectTo: '/machine'
});
}]);
controller.js
var hacksControllers = angular.module('hacksControllers', ['hacksFilters']);
hacksControllers.controller('hacksUserCtrl', ['$scope', '$http', '$interval', '$route',
function ($scope, $http, $interval, $route) {
$scope.$route = $route;
$scope.updateUser = function() {
$http.get('api/user.php').success(function(data) {
$scope.user = data;
if(!$scope.user.loggedIn){
window.location = "index.php";
}
});
}
$scope.updateUser();
$interval($scope.updateUser, 60000);
}]);
hacksControllers.controller('MachineOverviewCtrl', ['$scope', '$http', '$interval',
function ($scope, $http, $interval) {
$scope.machine = [];
$scope.updateMachine = function() {
$http.get('api/machine.php').success(function(data) {
$scope.machine = data;
});
}
$scope.updateMachine();
$interval($scope.updateMachine, 60000);
$scope.upgradeComponent = function(component){
var params = {name: component.name};
$http({
method: 'POST',
url: 'api/machine-upgrade.php',
data: $.param(params),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data) {
$scope.updateMachine();
$scope.updateUser();
});
}
}]);
rye*_*lar 16
你的主要问题是你是插值ng-disabled而不是提供角度表达式.请参阅文档中的参数定义.插值(使用{{}})表达式使表达式仅在ng-disabled指令中计算一次.
只需更改:
<button ng-disabled="
{{
(component.price_next <= 0) || (component.price_next > user.values.euro) ||
(user.values.energy_remaining < (component.energy_next-component.energy))
}}"
ng-click="upgradeComponent(component)" class="btn btn-danger" role="button">
Upgrade {{component.text}} for <span class="glyphicon glyphicon-euro"></span>
{{component.price_next}}
</button>
至
<button ng-disabled="(component.price_next <= 0) || (component.price_next > user.values.euro) ||
(user.values.energy_remaining < (component.energy_next-component.energy))"
ng-click="upgradeComponent(component)" class="btn btn-danger" role="button">
Upgrade {{component.text}} for <span class="glyphicon glyphicon-euro"></span>
{{component.price_next}}
</button>