javascript - 刷新最初传入 AngularJS 中 modalInstance 的数据

Question

使用 Angular - UI Bootstrap

我将数据传递到如下所示的 modalInstance 中。在模式中，用户能够创建新项目。按下保存按钮后，新项目将发送到服务器。我需要能够使用 $scope.items 中的更新数据刷新模态实例。请注意，模式不会在保存时关闭，因此我不能重新打开它。任何帮助将不胜感激。

$scope.items = ['item1', 'item2', 'item3'];

$scope.open = function (size) {

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    resolve: {
        items: function () {
            return $scope.items;
        }
    }
});

modalInstance.result.then(function () {
    // post updated $scope.items to server
    // get fresh $scope.items from server
    // notify modal of the updated items
}, function () {

});
};
});

Answer 1

您可以尝试为您的 $modalInstance 创建范围作为当前 $scope 的子级，如下所示:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    scope: $scope
});

现在，在将一些item添加到您的items后，一切都会正常工作。

有关详细信息，您可以查看 angular bootstrap page 上 $modal 指令的说明。 :

scope - 用于模态内容的范围实例(实际上 $modal 服务将创建所提供范围的子范围)。默认为 $rootScope

演示:http://plnkr.co/edit/khzNQ0?p=preview

希望它能解决您的问题；)