Javascript ajax未在UI中反映后角度更新$scope变量

我似乎无法理解这里的问题。 在ajax成功响应中，我在当前控制器中设置了一个未反映在UI中的值。我发现的一般答案是使用Angular ajax函数运行和/或将$apply或$digest应用于$scope。这些都不起作用

请注意，在代码中，{{和}}角度标记被替换为，因为我正在使用刀片诱惑引擎，并且这些标记冲突

其思想是在控制器中设置一个处理布尔值。ajax之前设置为true，之后设置为false。问题是该值没有返回到错误状态。运行$apply或$digest方法都会返回

错误：[$rootScope:inprog]

在ajax之后，我运行

console.log（$scope.processing）；
console.log（this.processing）；
console.log（$scope）

返回

unfind
取消查找
并返回$scope对象。
但是，在控制台中输出的$scope对象中，处理的值与它应该的值相同（false）

然而，它并没有反映在UI中，它仍然是正确的。单击切换按钮将处理值设置为false，并更新UI。
所以我非常困惑问题在哪里

HTML


创建新的度量单位
名称
创建新的度量单位
{！！\xsds:：angularLoader（'ng-show=“uom.processing”'）
切换

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;
};
}]);



})();

（函数（）{
var app=angular.module（'成分'，[]，函数（$interpolateProvider）{
$interpolateProvider.startSymbol（“”）；
}); 
app.controller（'UnitOfMeasureController'，['$scope'，'$http'，函数（$scope，$http）{
formData=[]；
此项处理=错误；
this.processForm=函数（）{
这是真的；
$http.get（document.js_root+'/recipe/components/uom/ajaxcreate'）。
成功（函数（数据、状态、标题、配置）{
/*$scope.$apply（函数（）{
$scope.processing=false；
});*/
log（$scope.processing）；
console.log（this.processing）；
console.log（$scope）；
$scope.processing=false；
如果（！data.success）{
console.log（data.errors）；
}否则{
console.log（'success'）；
}
//$scope.$digest（）；
//$scope.$apply（）；类似但较慢
/*$scope.$apply（函数（）{
$scope.processing=false；
});*/
}).
错误（函数（数据、状态、标题、配置）{
$scope.processing=false；
if（document.is_js_dev）{
警报（状态+“”）；
}            
});       
返回false；
};
}]);
})();
您的控制器代码应该重置标志
this.processing=false
而不是
$scope.processing=false当您使用
controllerAs
语法时

另外使用var vm=this；然后使用
vm
而不是
this

控制器

app.controller('UnitOfMeasureController', ['$scope','$http', function($scope,$http) {
   var vm = this;
   //then use this in your controller instead of this
}]);

是，
var vm=this将是一种方式

或者您可以在成功或错误方法中使用
.bind（this）
。使用ES6，您可以使用

请看看这个。与下面相同的演示


var-app=angular.module（'components'，[]，函数（$interpolateProvider）{
$interpolateProvider.startSymbol（“”）；
});
app.controller（'UnitOfMeasureController'，['$scope'，'$http'，函数（$scope，$http）{
formData=[]；
此项处理=错误；
this.processForm=函数（）{
这是真的；
var onSuccess=函数（数据、状态、标题、配置）{
/*$scope.$apply（函数（）{
$scope.processing=false；
});*/
//log（$scope.processing）；
console.log（this.processing）；
//console.log（$scope）；
此项处理=错误；
/*如果（！data.success）{
console.log（data.errors）；
}否则{*/
console.log（'success'，数据）；
//}
//$scope.$digest（）；
//$scope.$apply（）；类似但较慢
/*$scope.$apply（函数（）{
$scope.processing=false；
});*/
};
var onError=函数（数据、状态、标题、配置）{
此项处理=错误；
if（document.is_js_dev）{
警报（状态+“”）；
}
};
$http.jsonp（'http://www.mocky.io/v2/5568b30150223de60c64f24f/?callback=JSON_CALLBACK“）。//document.js_root+”/recipe/components/uom/ajax create”）。
成功（onSuccess.bind（this））。
错误（onError.bind（this））；
返回false；
};
}]);

创建新的度量单位
名称
创建新的度量单位
切换
variable
this
在$http.get的success函数中，可能不再是您想要的
this
。事实上，
这个
可能是你过去认识的人，但现在你忘记了

我已经修改了您的代码以进行演示

 app.controller('UnitOfMeasureController', [
    '$scope',
    '$http', 
    UnitOfMeasureController
]);

function UnitOfMeasureController($scope,$http) {
    var vm = this;
    vm.processing = false;
    vm.processForm  = processForm;

    function processForm(){
        vm.processing = true;

        var url = document.js_root+'/recipe/ingredients/uom/ajax-create';
        return $http
            .get(url)
            .success(function() {
                vm.processing = false;   
            })
            .error(function(err) {
                vm.processing = false;
            });        
    };
}

但我认为您应该将$http.get部分移动到一个服务，比如RecipeService或任何您想要的名称

看看最佳实践角度风格。这是最新的指南，即使谷歌自己也会参考。
添加“This.processing=false”没有任何效果。如果我在控制台中登录“this.processing”的值，在分配之前和之后，我会得到“undefined”和“false”。在哪里
 app.controller('UnitOfMeasureController', [
    '$scope',
    '$http', 
    UnitOfMeasureController
]);

function UnitOfMeasureController($scope,$http) {
    var vm = this;
    vm.processing = false;
    vm.processForm  = processForm;

    function processForm(){
        vm.processing = true;

        var url = document.js_root+'/recipe/ingredients/uom/ajax-create';
        return $http
            .get(url)
            .success(function() {
                vm.processing = false;   
            })
            .error(function(err) {
                vm.processing = false;
            });        
    };
}