javascript - 在 Controller 渲染 View 之前将ajax数据加载到$scope中

Question

作为 Angular 新手，我无法弄清楚如何在开始编译 View 之前加载 Controller 中所需的所有数据。

我创建了一个工厂来从服务器加载 JSON。

app.factory('myData', function ($http) {
    return {
        getMetaData : function () {
            return $http.get('get-metadata').then(function (result) {
                return result.data;
            });
        }
    }
});

和一个使用该工厂的 Controller

app.controller('MyController', function ($scope, $http, myData) {
    $scope.meta_data = {};

    myData.getMetaData().then(function (data) {
        $scope.meta_data = data.metadata;
    });

});

我还在我的 Controller 中使用了$watch，如下所示

$scope.$watch("my_var.x", function (x, old_x) {
    if (x) {
        var y = $scope.meta_data.mapping[x] || [];
        $scope.meta_data.y = y;
    }
});

我的问题是，$watch 在 myData.getMetaData 返回之前被调用，并且 $scope.meta_data.mapping 不可用。因此会引发错误。

任何正确方向的提示就足够了。

还有，我这样做对吗？我的意思是在这种情况下，我应该加载 Controller 外部的所有数据并使用 angular.bootstrap(document.getElementById('myApp'), ['myApp']); 手动引导我的应用程序？

Answer 1

如果您需要等到数据获取后再启动 $watch，只需在已解析的 Promise 回调函数中声明它即可:

app.controller('MyController', function($scope, $http, myData) {
    $scope.meta_data = {};
    myData.getMetaData().then(function(data) {
        $scope.meta_data = data.metadata;
        $scope.$watch("my_var.x", function(x, old_x) {
            if (x) {
                var y = $scope.meta_data.mapping[x] || [];
                $scope.meta_data.y = y;
            }
        });
    });
});

否则，正如 @apairet 所说，阅读有关使用 resolves 和路由的信息可能是一个很好的做法。