【发布时间】:2015-05-29 18:23:50
【问题描述】:
我似乎无法在这里找出问题所在。 在 ajax 成功响应中,我在当前控制器中设置了一个未反映在 UI 中的值。我发现的一般答案是使用 Angular ajax 函数和/或将 $apply 或 $digest 应用于 $scope。这些都不起作用。
请注意,在代码中,{{ 和 }} 角度标签被替换为 ,因为我正在使用刀片诱惑引擎并且这些标签冲突。
这个想法是在控制器中设置一个处理布尔值。在ajax之前设置为true,之后设置为false。问题是值没有返回到它的假状态。运行 $apply 或 $digest 方法都返回 Error: [$rootScope:inprog]。
在我运行 ajax 之后
console.log($scope.processing);
console.log(this.processing);
console.log($scope);
返回
undefind
undefind
并返回 $scope 对象。
但是在控制台输出的 $scope 对象中,处理的值应该是(false)。
但它没有反映在 UI 中,但它仍然是正确的。单击切换按钮将处理值设置为 false 并更新 UI。 所以我对问题出在哪里感到非常困惑......
HTML
<div class="panel panel-default" ng-controller="UnitOfMeasureController as uom">
<div class="panel-heading">
<h3 class="panel-title">Create new Unit of Measure</h3>
</div>
<div class="panel-body">
<div ng-hide="uom.processing">
<form ng-submit="uom.processForm()" id="new_uom_form">
<div class="form-group">
<label for="uom_input01">Name</label>
<input ng-model="uom.formData['name']" type="text" class="form-control" id="uom_input01" placeholder="" name="uom[input01]" value="{{\xsds::old('uom.input01',$values)}}">
</div>
<div style="text-align:right"><button type="submit" class="btn btn-primary" ><i class="fa fa-plus-square"></i> Create new Unit of Measure</button></div>
</form>
</div>
{!!\xsds::angularLoader('ng-show="uom.processing"')!!}
</div>
<button ng-click="uom.processing = false">Toggle</button>
<%uom.processing%>
</div>
app.js
(function( ){
var app = angular.module('ingredients',[], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('UnitOfMeasureController', ['$scope','$http', function($scope,$http) {
formData = [];
this.processing = false;
this.processForm = function( ){
this.processing = true;
$http.get(document.js_root+'/recipe/ingredients/uom/ajax-create').
success(function(data, status, headers, config) {
/* $scope.$apply(function(){
$scope.processing = false;
});*/
console.log($scope.processing);
console.log(this.processing);
console.log($scope);
$scope.processing = false;
if (!data.success) {
console.log(data.errors);
} else {
console.log('success');
}
//$scope.$digest();
//$scope.$apply(); similar but slower
/* $scope.$apply(function() {
$scope.processing = false;
});*/
}).
error(function(data, status, headers, config) {
$scope.processing = false;
if(document.is_js_dev){
alert(status+' ');
}
});
return false;
};
}]);
})();
【问题讨论】:
标签: javascript ajax angularjs scope angular-http