控制器完成参数加载后，如何在Angular中加载模板？

Question

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

控制器：

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

您可以做很多事情。

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

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

$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可以注入（就像其他服务一样）到mainDashboardApi控制器中：

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