javascript - 范围未在资源回调函数外部更新

Question

我在 AngularJS 中有一个名为 WebService 的工厂，它返回一个 $resource 对象。

angular.module('cstarsServices')
.factory('WebService', function ($resource)
{
    return $resource("some_url_here/:op1/:op2/:op3/:op4",
            {op1: 'indexes'},
            {
                getIndexes: {
                    isArray: true,
                    method: 'GET'
                }

            }
        );
});

在我的一个 Controller 中，我调用 getIndexes:

WebService.getIndexes(function(data){

    // SearchIndex Table
    $scope.languages = [];
    var languages = [];
    var ajaxResponse = [];


    angular.forEach(data, function (item, i)
    {
        if (item.sourceTypes != null)
        {
            ajaxResponse.push({ selected: false, name: item.name, languages: item.sourceTypes[0] });
            languages[item.sourceTypes[0]] = item.sourceTypes[0];
        }
    });
    $scope.searchIndexes = ajaxResponse;


    for (var key in languages)
    {
        $scope.languages.push(languages[key]);
    }
    $scope.language = languages[0];
});
//This is undefined
alert($scope.searchIndexes);

但是，这似乎没有正确更新 $scope:例如，$scope.searchIndexes 的值已定义，并且在函数内部具有正确的数据，但在函数外部未定义 。发生了什么事，如何让 $scope 更新整个 Controller 而不仅仅是回调函数内？预先感谢您的帮助。

Answer 1

您的WebService.getIndexes函数正在进行异步AJAX调用。它下面的 alert() 命令在调用 WebService.getIndexes 之后、但在后端服务实际返回任何数据之前执行。因此，您在 AJAX 调用中执行的 $scope 分配实际上发生在 alert() 命令(或 Controller 中不在函数中的任何其他代码)之后。

尝试在 AJAX 调用末尾添加 alert($scope.searchIndexes); 。您会注意到，此警报的输出实际上会显示在 AJAX 调用之外的 alert() 输出下方。

如果没有看到 Controller 的其余部分，很难推荐解决方法。但这里的一般经验法则是仅在函数内引用 $scope.searchIndexes。只要这些函数仅在 Controller 完全加载后调用，您就可以毫无问题地引用 $scope.searchIndexes。