javascript - Controller 完成参数加载后如何以 Angular 加载模板？

Question

我遇到的问题是模板加载早于 Controller 中的参数，因此用户看到的是空 block 。

Controller :

app.controller('mainDashboardApi', ['$scope', '$http',
    function($scope, $http) {
        $http.get('api/dashboard/main').success(function(data) {
            $scope.dashboard = data;
        });
    }
]);

路由器:

$stateProvider
    .state('dashboard', {
        url: "/dashboard",
        templateUrl: "dashboard",
        controller: 'mainDashboardApi'
    })

如何在参数加载完成后加载模板？

Answer 1

您可以做很多事情。

您可以隐藏空 block ，并仅在数据加载时显示它们:

app.controller('mainDashboardApi', ['$scope', '$http',
    function($scope, $http) {
        $scope.isLoading = true;

        $http.get('api/dashboard/main').success(function(data) {
            $scope.dashboard = data;
            $scope.isLoading = false;
        });
    }
]);

那将是手动方式。

但是 ui.router 支持这种场景(ngRoute 也是如此)，带有状态的 resolve 参数，您可以在其中延迟加载 View 直到所有 promise 都已解决(或其中一个被拒绝):

$stateProvider
    .state('dashboard', {
        url: "/dashboard",
        templateUrl: "dashboard",
        controller: 'mainDashboardApi',
        resolve: {
          dashboard: function($http){
             return $http.get('api/dashboard/main')
                      .then(function(response){
                         return response.data;
                      })'
          }
        }
    })

然后，可以将 dashboard 注入(inject)(就像您注入(inject)其他服务一样)到 mainDashboardApi Controller 中:

app.controller('mainDashboardApi', ['$scope', 'dashboard',
    function($scope, dashboard) {
        $scope.dashboard = dashboard;
    }
]);