当在 then 函数内部分配 $scope 值时，数据绑定不起作用答案

【问题标题】：Data binding is not working when $scope value assigned inside then function当在 then 函数内部分配 $scope 值时，数据绑定不起作用
【发布时间】：2018-02-13 16:15:07
【问题描述】：

谁能帮我找出我在这里做错了什么。我正在调用 $http 服务 将 .xlsx 文件上传到里面然后函数我将响应数据分配给 $scope 变量 并尝试将其绑定到 html 但绑定没有发生。任何建议都会有很大帮助，在此先感谢。

这里是代码示例。

fileUpload.uploadFile(file)
     .then(function(response) {
          console.log('File Uploaded Successfully');
            if (response.status == 201) {
                if(response.data!=undefined) {
                    var _data = angular.fromJson(response.data);
                        $scope.batchUploadDetails = _data;
                        console.log($scope.batchUploadDetails);
                    }
                }
      }, function(response) {
        $scope.batchUploadDetails = {};
        console.log('File Uploading Failed!');
});

HTML模板

<div class="col-xs-12 no_pad borderAll padding20 margTop20 mb20" >

    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 no_pad">
        <label class="col-xs-12 no_pad labelNew">Employee count</label><span
                    class="col-xs-12 no_pad">{{ batchUploadDetails.employeeCount }}</span>
    </div>

    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 no_pad">
        <label class="col-xs-12 no_pad labelNew">Company code</label><span
                    class="col-xs-12 no_pad">{{ batchUploadDetails.companyCode }}</span>
    </div>

</div>

【问题讨论】：

你在说什么 $scope 变量？ _data?
我说的是 $scope.batchUploadDetails

标签： javascript angularjs promise

【解决方案1】：

您应该修改 $apply 中的范围变量以使更改生效。

您也可以使用 $timeout 服务，它最终会调用 $apply 服务。

【讨论】：

【解决方案2】：

您可以使用 $apply 来触发 $digest 循环。

fileUpload.uploadFile(file)
     .then(function(response) {
          console.log('File Uploaded Successfully');
            if (response.status == 201) {
                if(response.data!=undefined) {
                    var _data = angular.fromJson(response.data);
                        $scope.batchUploadDetails = _data;
                        setTimeout(function (){ 
                           $scope.$apply();// you can use $timeout as well. Here I used settimeout to avoid $digest already in progress error
                      },0)
                        console.log($scope.batchUploadDetails);
                    }
                }
      }, function(response) {
        $scope.batchUploadDetails = {};
        console.log('File Uploading Failed!');
});

【讨论】：