Angular Bootstrap 模态绑定问题

Question

我正在使用 Angular Bootstrap，实际上我正在尝试使用 Modal 正确更新我的模型。

这是非常简单的代码：

控制器：

function open(room) {
  var roomModal = $uibModal.open({
    templateUrl: 'room-modal.html',
    controller: 'RoomModalController',
    controllerAs: 'modal',
    resolve: {
      room: room
    }
  });

  roomModal.result.then(function (response) {
    RoomsService.update({
      roomId: response._id
    }, response).$promise (etc...);
  });
}

模态控制器：

    var vm = this;

    vm.room = room;

    vm.save = function () {
      $uibModalInstance.close(vm.room);
    };

    vm.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };

基本上我正在解析房间以获得一些关于它的信息，然后如果需要我希望在模态中更新一些关于房间的信息。

它工作正常，除非我不想更新某些信息并单击 "close"。

发生的情况是：如果我更新了一些信息然后单击 "close" 数据库中的信息尚未更新（确定）但已在主视图中更新...因为 Angular 绑定模态信息到主视图...

这很奇怪，因为我将这些信息传递到一个单独的范围 (vm)，除非我不单击“保存”，否则我不应该期待这种行为...

我哪里做错了？！？

Answer 1

在您的 RoomModalController 中深复制 room 对象以防止更新时模型也被更新。

vm.room = angular.copy(room);

现在这个对象将负责模态绑定，并且在更改为您的根范围 vm.room 对象时不会干扰。

要最终保存此数据，您必须将 vm.root 模态对象保存到数据库中，并根据模态中所做的这些更改更新根范围 vm.room 对象。

Angular Bootstrap 模态绑定问题

Angular Bootstrap Modal binding issue

javascript

angularjs

angular-bootstrap