Question

我正在尝试将AngularUI modal嵌入我的某个网页。

此函数使用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}}显示空对象。

我猜，这与某些异步延迟有关。我该如何解决这个问题？

-Thanks

Answer 1

这正是解决方案的意思，它会让你的控制器等待，直到解决了所有内容：

控制器：

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-router resolve的参考：https://github.com/angular-ui/ui-router/wiki#resolve

AngularUI Modal不呈现http获取的数据

1 个答案: