如何在不重新加载页面的情况下更新$scope对象？

Question

你好吗

所以我从Python返回一个字典，然后在将其传递给angular之前对其进行jsonify'ed。在

例如，这是我从Python返回的字典：

the_dict = {"success": False, excludedPkgs: ['12345', '45678'], message:'Failed to depart pkgs'}

return jsonfiy(the_dict)

此字典包含状态、排除的包列表和错误消息。在

结果通过dataFactory函数返回到angular，如果状态为False，则更新$sessionStorage

^{pr2}$

现在在我的包控制器中，我自动获取$存储失败的包然后设置一个$scope.$watchCollection，我希望它能在控制台中自动显示更新后的值：

包裹控制器

$scope.failedPkgs = dataFactory.getFailedPkgs();

    $scope.$watchCollection('failedPkgs', function (newVal, oldVal){
        console.log(newVal, oldVal)
    });

现在，问题是当您加载软件包.html屏幕，这很有意义。用户必须单击一个分离按钮，该按钮将尝试分离包，这基本上意味着获取包信息并将其注入数据库表中。在

但是，如果您试图离开已经离开的包，SQLAlchemy将返回一个完整性错误，因为您不能将重复的订单放入数据库。在

当上面的字典返回错误状态和失败包的列表时。在

我这么说是为了说$scope.FailedPggs公司将仅在重新加载屏幕后显示更新的值。在

所以我的问题是，如何让角度变得有角度来即时更新$scope.FailedPggs公司不用重新加载页面？或者每次都要重新装填？在

****更新****

当我安慰资源数据排除在POST请求中，它确实会立即显示更新的值，但控制器在重新加载之前不会看到该值：

departedFromPackages: function(ids, user_id){
        $http({
          method: 'POST',
          url: urlBase + 'depart/pkg/',
          data: {'order_id': ids, 'user': user_id}
        }).then(function(res){
         if (res.data.success == false) {
            console.log(res.data.excludedPkgs)
            $storage.failedPkgs = res.data.excludedPkgs;
            console.log($storage.failedPkgs)
         }

        });
      }

[1222822, 1222826, 1222819]

****更新****

这是返回$存储失败的包在

getFailedPkgs: function(){
        return $storage.failedPkgs;
      },

****更新****

这是通过已离开按钮的onClick事件调用的函数：

$scope.departed = function() {
            var selectedRows = [];
            $('.select-row-cb').each(function(){
                if ($(this).is(':checked')) {
                    selectedRows.push($(this).val());
                }
            });

            if (selectedRows.length > 0) {
                showProgressDialogueBox('Departing Package');
                if (selectedRows.length == $scope.dataTable.data().length) {
                    // All packages in wave are selected; Generate the entire wave
                    $scope.allPkgDeparted = 1
                    dataFactory.departedFromWaves($scope.waveid, $scope.user);
                } else {
                    dataFactory.departedFromPackages(selectedRows, $scope.user);
                 }
            }
        }

Answer 1

我想你是在找这个： reference

AngularJS provides wrappers for common native JS async behaviors:

Events => ng-click
Timeouts => $timeout
jQuery.ajax() => $http

只需执行如下操作：
$scope.$apply()当您完成更新$scope。
ps:也适用于$rootscope。在

编辑：

防止在调用$scope.$apply()时发生错误$digest

您可以通过检查$digest来检查$digest是否已经在进行中。在

if(!$scope.$$phase) {
  //$digest or $apply
}

如果正在进行$digest或{}，则$scope.$$phase将返回“$digest”或“$apply”。在

• $$phase对框架是私有的，这是有充分理由的。在

• $scope.$apply(callback)调用$rootScope.$digest，这意味着它将重新表示应用程序的根作用域及其所有子级，即使您在一个独立的作用域内。

• $scope.$digest()将简单地将其模型与视图同步，但不会消化其父作用域，这可以在使用独立作用域（主要来自指令）处理HTML的独立部分时节省大量性能。$digest不接受回调：执行代码，然后进行摘要。

编辑： 每次更新$scope或变量时都可以调用此函数：

^{pr2}$

Answer 2

请检查下面的模式是否解决了您的问题。在

$scope.failedPkgs = dataFactory.getFailedPkgs();  // Initial call

$scope.buttonListener = buttonListener;

function buttonListener(){      // Executed on button click

    dataFactory.departedFromPackages().then(function(){
        $scope.failedPkgs = dataFactory.getFailedPkgs();
    });
}

在同一个button listener函数本身中，我们在POST之后调用更新$scope.failedPkgs的方法。这样你就不用再按这个按钮了。您可能必须将代码放在then块中，因为POST的工厂调用返回一个promise，并且不会立即解析，所以如果您立即调用getFailedPkgs()，那么{}中不会有任何值，因为$http可能没有返回promise。在

Answer 3

你好吗

所以我决定从另一个角度来看待这个问题。而不是使用dataFactory.getFailedPkgs（），我只是通过rootScope发出广播，然后在控制器中发出catch-it：

数据工厂：

departedFromPackages: function(ids, user_id){
        $http({
          method: 'POST',
          url: urlBase + 'depart/pkg/',
          data: {'order_id': ids, 'user': user_id}
        }).then(function(res){
         if (res.data.success == false) {
            $rootScope.$broadcast('failedPackages', {packages: res.data.excludedPkgs});
         }

        });
      },

包裹控制器：

^{pr2}$

这使我可以立即看到失败的包。谢谢大家的帮助