Question

我在使用UI Bootstrap的模态实例时遇到了问题，我知道这是我做错的事情，我无法弄清楚是什么。

我从一个创建talker新实例的按钮开始，并将其传递给我的modalInstance：

     $scope.newTalker = function( type ) {

        // Create a new instance of the talker
        var talker = {};



        // Set some default talker options
        talker.type = type;
        talker.showReduced = true;



        // Launch the modal
        var modalInstance = $uibModal.open({
            animation: true,
            backdrop: 'static',
            templateUrl: 'templates/modal.talker.new.tpl.html?bust=' + Math.random().toString(36).slice(2),
            controller: 'TalkerModal as vm',
            resolve: {
                talker: function() {
                    return talker;
                }
            }
        });

        ...
        ...
     }

然后进入另一个视图并根据从我的模态传回的数据构建一个页面 - 一切都很好。

但是，我的问题是，在我看来，我有一个编辑按钮，我想让用户编辑$scope.talker中存储的数据（从模态返回的数据）。

我将$scope.talker传回模式以允许用户编辑原始详细信息：

    $scope.editTalker = function() {



        var modalInstance = $uibModal.open({
            animation: true,
            backdrop: 'static',
            templateUrl: 'templates/modal.talker.new.tpl.html?bust=' + Math.random().toString(36).slice(2),
            controller: 'TalkerModal as vm',
            resolve: {
                talker: function() {
                    return $scope.talker;
                }
            }
        });

        ...
        ...
     };

我的模态控制器看起来像这样我将传入的说话者分配给vm.talker：

.controller( 'TalkerModal',
    function( $uibModalInstance, $timeout, talker ) {



        var vm = this;



        vm.submitted = false;
        vm.numRowsError = false;
        vm.talker = talker;
        vm.titleLocked = true;
        vm.showPriceEntry = false;
        vm.quantity = 1;

        ...
        ...

但是，我发现当用户在模态中编辑数据时，它会在后台实时更新视图。即使用户点击取消，所有更改都已提交到页面。

要将我的示例置于实时视角，请查看以下示例https://embed.plnkr.co/plunk/8U4TIT。在模态上编辑名称时，您可以在后台看到它的更新。

我该如何防止这种情况？

如何防止uib-modal更新实时页面内容

0 个答案: