AngularUI Modal 不呈现 http 获取的数据

Question

我正在尝试将AngularUI模式嵌入到我的一个网页中。

此函数使用 HTTP get 请求获取数据。

$scope.fetchTimings=function(){
$http({
    method: 'GET',
    url: 'get/xyz'
})
    .success(function(data) {
            return data;
    })
    .error(function(data, status) {
        return {};
    });
};

这是我传递给模态的变量：

$scope.newCategory={
  title:'xyz',
  openHours: $scope.fetchTimings()
}

控制器：

var modalInstance = $modal.open({
templateUrl: "addcategory.html",
controller: "addCategoryModalInstanceCtrl",
resolve: {
    newCategory: function() {
        return $scope.newCategory;
    }
}
});

模态控制器：

.controller('addCategoryModalInstanceCtrl', function($scope, $modalInstance, newCategory) {
    $scope.newCategory = newCategory;
    $scope.addedNewCategory = $scope.newCategory;
    $scope.ok = function() {
        $modalInstance.close($scope.addedNewCategory);
    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
})

视图：在看来，{{newCategory.title}} 正在渲染，而{{newCategory.openHours}} 显示空对象。

我想，这与一些异步延迟有关。如何解决此问题？

-谢谢

Answer 1

这正是 resolve 的目的，它会让您的控制器等待，直到其中的所有内容都得到解决：

控制器：

var modalInstance = $modal.open({
    templateUrl: "addcategory.html",
    controller: "addCategoryModalInstanceCtrl",
    resolve: {
        newCategory: function() {
            return $scope.newCategory;
        },
        timings: ['$http', function($http){
            return $http({
                method: 'GET',
                url: '/someUrl'
            });
        }]
    }
});

模态实例控制器：

.controller('addCategoryModalInstanceCtrl',
    function($scope, $modalInstance, newCategory, timings) {
        $scope.timings = timings;
        $scope.newCategory = newCategory;
        $scope.addedNewCategory = $scope.newCategory;
        $scope.ok = function() {
            $modalInstance.close($scope.addedNewCategory);
        };
        $scope.cancel = function() {
            $modalInstance.dismiss('cancel');
        };
    }
)

请参阅 ui 路由器解析的参考：https://github.com/angular-ui/ui-router/wiki#resolve