javascript - Angular Bootstrap Modal 绑定(bind)问题

Question

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

这是非常简单的代码:

Controller :

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...);
  });
}

模态 Controller :

    var vm = this;

    vm.room = room;

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

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

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

除非我不想更新某些信息并单击“关闭”，否则它工作正常。

发生的情况是:如果我更新了一些信息，然后单击“关闭”，则该信息尚未在数据库上更新(确定)，但已在主视图中更新...因为 Angular 将模态信息绑定(bind)到主视图...

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

我在这里做错了什么？!？

Answer 1

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

vm.room = angular.copy(room);

现在，该对象将负责模式绑定(bind)，并且在更改为根范围 vm.room 对象时不会干扰。

要完成保存此数据，您必须将 vm.root 模式对象保存到数据库，并根据这些更改更新根范围 vm.room 对象在模态中制作。