AngularJS:在控制器收到所有数据后加载templateUrl

时间:2013-03-19 04:45:12

标签: javascript templates angularjs

我想在加载来自我服务器的数据时显示我的模板。

我在一些服务中创建了一个名为Services的模块来加载我的数据,我正在使用HomeService作为我的例子。

var app = angular.module('MyApp', ['Services']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', 
        {
            templateUrl: 'home.html',
            controller: 'Home_Ctrl',
            resolve: {
                loadData: //??
            }
        });
}]);

app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {

    $scope.data = HomeService.getData();

}

我想我需要创建一个承诺来做到这一点。是否可以将此功能放在我的控制器中?

我的意思是,我不想要那样的东西:

var ctrl = app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
    //Do something
}

//Promise
ctrl.fct = function($q) {
}

我想要这样的东西:

app.controller('Home_Ctrl', ['$scope', '$q', 'HomeService', function($scope, $q, HomeService) {

    //Do something

    //Promise
    this.fct = function() {}
}

有什么想法吗?

感谢。

1 个答案:

答案 0 :(得分:2)

您可以使用控制器的resolve属性。 您可以创建一个将返回promise的对象并分配给控制器解析函数并在控制器定义中注入相同的内容,请参阅非常简单的示例

$routeProvider.when('/ExitPoll', {
        templateUrl: '/partials/ExitPoll.html', controller: exitpollController, resolve: {
            responseData: ['$http', function ($http) {
                return $http.get('/Candidate/GetExitPolls/hissar').then(function (response) {
                    return response.data;
                });
            }],

        }
    });


var exitpollController = ['$scope', '$http','responseData','$rootScope',
function ($scope, $http, responseData, $rootScope) {
}];