ng禁用，数据更改后不评估 [英] ng-disabled not evaluating after data change
问题描述
我正在编写一个应用程序，用户可以在其中升级使用游戏内支付的组件.按下升级"按钮后，ajax请求将发送到服务器并升级组件.之后，我发出另一个ajax请求以检索新的组件页面.但是，在更新数据的同时，不会再次检查ng-disabled，因此，升级按钮在不应该单击时仍可单击.重新加载页面或路由可以解决此问题.但是重新加载页面并不是良好的用户体验.
I am writing an app where the user can upgrade components paying with ingame money. After pressing the "upgrade"-button an ajax request is send to the server and upgrades the component. After that I am issuing another ajax request to retrieve the new components page. But while the data gets updated, ng-disabled is not checked again, so the upgrade-button remains clickable when it should not. Reloading page or route fixes this. But reloading the page is no good user experience.
我正在做这个项目来学习Angularjs的方法，因此，如果我的设置中有任何错误或我怎么做，请告诉我！
I am doing this project to learn the Angularjs way, so if there is anything wrong in my setup or how I do something, please tell me!
我尝试包含所有相关代码，如果缺少某些内容，则可以在此链接下查看使用用户名和密码"test".
I try to include all relevant code, if something is missing, you can view it under this link with user and password "test".
对于启动来说，在machine-overview.html中，按钮调用controller.js控制器MachineOverviewCtrl中的upgradeComponent发出Ajax请求，并在成功更新$scope.user和$scope.machine时，更改后的数据将反映在视图中( c6>)，但未评估按钮ng-disabled并保持旧状态.
For a headstart, in machine-overview.html the button calls upgradeComponent in controller.js controller MachineOverviewCtrl issuing an Ajax request and on success updating $scope.user and $scope.machine, changed data is reflected in the view (ng-repeat) but the buttons ng-disabled is not evaluated and keeps the old state.
我做错了什么?如何强制评估或以Angularjs喜欢的方式进行更新?
What am I doing wrong? How can I force an evaluation or do the update in a way Angularjs likes it?
@ jack.the.ripper的答案没有说明这一点，即存在多个按钮，每个ng-repeat都有一个按钮，但是这些按钮仅不评估其ng-disable指令.
@jack.the.ripper's answer is missing the point, that there are multiple buttons, one for every ng-repeat, but those buttons only don't evaluate their ng-disable directive.
//编辑
<!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>
machine-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 var及其起源:
javascript vars and their origin:
$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();
});
}
}]);
推荐答案
在阅读$ scope.$ apply和$ scope.$ watch时，我找到了解决方案:当我更改请求的顺序时，一切正常.因为在更新用户数据(例如资金)时，不会为计算机表触发任何更新.更改代码以首先更新$ scope.user，然后再更新$ scope.machine就可以解决此问题.我正在制作此社区Wiki.
While reading up on $scope.$apply and $scope.$watch I found the solution to this: When I change the order of my requests, everything works. Because on updating the userdata (like money) there is no update triggered for the machine table. Changing the code to first update $scope.user and after that $scope.machine solves this problem. I am making this community wiki.
这篇关于ng禁用，数据更改后不评估的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
