Question

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

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

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

和使用controller

的factory

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

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

});

我也在我的$watch中使用controller，如下所示

$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不可用。由于该错误被抛出。

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

另外，我做得对吗？我的意思是这种情况下我应该在控制器外部加载所有数据并使用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的信息。

在控制器呈现视图之前，将ajax数据加载到$ scope中

1 个答案: