javascript - ajax 后 Angular 更新 $scope 变量未反射(reflect)在 UI 中

Question

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

请注意，代码中的 {{ 和 }} Angular 标签被替换为 <% 和 %>，因为我正在使用 Blade 诱惑引擎，并且这些标签存在冲突。

这个想法是在 Controller 中设置一个处理 bool 值。 ajax之前设置为true，之后设置为false。问题是该值没有返回到其错误状态。运行 $apply 或 $digest 方法都会返回错误:[$rootScope:inprog]。

在 ajax 之后我运行

console.log($scope.processing);
console.log(this.processing);
console.log($scope);

返回

未定义
未定义并返回 $scope 对象。然而，在控制台输出的 $scope 对象中，处理的值是它应该的(false)。

但是它没有反射(reflect)在用户界面中，它仍然是正确的。单击切换按钮将处理值设置为 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;
};
}]);



})();

Answer 1

$http.get success 函数中的

变量 this 可能不再是你想要的 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 或任何你想要的名称。

看看https://github.com/johnpapa/angular-styleguide Angular 风格的最佳实践。这是最新的指南，甚至 google 本身也引用过。