AngularJS：$http请求外部无法获取$scope值问题排查求助

这是个非常典型的异步操作时序问题，我来帮你拆解原因和解决办法：

核心原因：$http是异步执行的 #

$http发起的HTTP请求不会阻塞后续代码的执行——当你调用getFilterDataUrl('REGION')后，代码会立刻继续执行后面的console.log($scope.REGION)，而此时HTTP请求还在和服务器通信，success回调根本还没触发，$scope.REGION自然还没被赋值，所以返回undefined。

而在success回调里能拿到值，是因为这个回调函数只有在服务器成功返回数据后才会被执行，此时response.data已经被赋值给对应的$scope变量了。

解决方案 #

根据你的业务场景，有几种常用的处理方式：

1. 把依赖变量的逻辑放到回调内部
   如果你的代码需要用到这些$scope变量，直接把逻辑移到success回调里，或者封装成函数在回调中调用：

function getFilterDataUrl(category_url) { 
    var filterUrl = Config.endpoints.getMilestoneFilter.url+"?filter_name="+category_url; 
    $http({ 
        url: filterUrl, 
        method: Config.endpoints.getMilestoneFilter.method 
    }).success(function successCallback(response){ 
        switch(category_url) { 
            case 'REGION': 
                $scope.REGION = response.data; 
                // 调用依赖REGION的逻辑
                initRegionSelect(); 
                break; 
            case 'SHIPPING_POINT': 
                $scope.SHIPPING_POINT = response.data; 
                initShippingPointSelect(); 
                break; 
        } 
    }); 
} 

function initRegionSelect() {
    // 这里可以安全使用$scope.REGION
    console.log($scope.REGION);
    // 比如做一些数据预处理、初始化选择框默认值等操作
}

2. 用Promise管理多请求的异步流程
   如果需要等待所有请求都完成后再执行逻辑，可以用AngularJS的$q服务来合并多个请求的Promise：

function getFilterDataUrl(category_url) { 
    var filterUrl = Config.endpoints.getMilestoneFilter.url+"?filter_name="+category_url; 
    // 返回$http请求的Promise对象
    return $http({ 
        url: filterUrl, 
        method: Config.endpoints.getMilestoneFilter.method 
    }).then(function(response){ 
        switch(category_url) { 
            case 'REGION': $scope.REGION = response.data; break; 
            case 'SHIPPING_POINT': $scope.SHIPPING_POINT = response.data; break; 
        }
        return response.data;
    }); 
} 

// 等待两个请求都完成后再执行后续逻辑
$q.all([
    getFilterDataUrl('REGION'),
    getFilterDataUrl('SHIPPING_POINT')
]).then(function(results) {
    // 这里两个变量都已经被赋值，可以安全访问
    console.log($scope.REGION, $scope.SHIPPING_POINT);
    // 执行需要依赖这两个数据的操作
});

3. 额外优化：修正选择框的绑定逻辑
   顺便提一下，你的multiselect指令绑定有点小问题：ng-model和options都用了同一个变量（比如REGION），这会导致选中项和数据源混在一起，容易出问题。建议把ng-model改成专门存选中项的变量，比如：

<div class="form-group"> 
    <label for="pwd">REGION:</label> 
    <multiselect class="input-xlarge" multiple="true" ng-model="selectedRegions" options="i for i in REGION" change="selected()"></multiselect> 
</div> 
<div class="form-group"> 
    <label for="pwd">SHIPPING POINT:</label> 
    <multiselect class="input-xlarge" multiple="true" ng-model="selectedShippingPoints" options="i for i in SHIPPING_POINT" change="selected()"></multiselect> 
</div>

这样REGION是数据源，selectedRegions是用户选中的项，逻辑更清晰，也避免了双向绑定的冲突。

内容的提问来源于stack exchange，提问作者Kshri