Проблема привязки Angular Bootstrap Modal

Я работаю с 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');
    };

По сути, я разрешаю комнату, чтобы получить некоторую информацию о ней, а затем, если необходимо, я хочу обновить некоторую информацию о комнате в модальном окне.

Он работает нормально, если я не хочу обновлять некоторую информацию и нажимаю «закрыть».

Что происходит: если я обновил некоторую информацию, а затем нажал «закрыть», информация не была обновлена ​​​​в базе данных (ОК), но была обновлена ​​​​в основном представлении... Поскольку Angular привязывает модальную информацию к основному виду ...

Это довольно странно, потому что я передаю эту информацию в отдельную область (vm), и если я не нажму кнопку «Сохранить», я не должен ожидать такого поведения...

Что я здесь делаю не так?!?


person Ayeye Brazo    schedule 07.02.2017    source источник
comment
Если вы используете связанные данные ($scope.objname) в качестве ng-models для ваших входных данных, эти привязки автоматически изменяются при изменении значения. Насколько я вижу, объект room передается через ваши вызывающие функции, которые, возможно, используют объект области. Чтобы предотвратить это, вы можете создать отдельную переменную области (для обработки изменений при ручном действии).   -  person daan.desmedt    schedule 07.02.2017
comment
Я использую формат vm, а не $socpe. Спасибо   -  person Ayeye Brazo    schedule 07.02.2017
comment
Это то же самое, вместо $scope ваш объект привязки просто называется vm. Это не меняет цикл дайджеста и методологию связывания.   -  person daan.desmedt    schedule 07.02.2017
comment
Не могли бы вы предоставить решение? Я не понимаю, что вы имеете в виду... Спасибо   -  person Ayeye Brazo    schedule 07.02.2017
comment
Пожалуйста, предоставьте рабочий образец через JSFiddle/..., чтобы мы могли вам помочь. Невозможно помочь вашей конкретной проблеме, показав решение.   -  person daan.desmedt    schedule 07.02.2017
comment
Ну, ng-models — это тот, который я передаю из resolve, чтобы показать текущее значение. Затем, если мне нужно обновить один, я делаю это, иначе нет... Бывает, я обновляю значение, а затем решаю удалить свои изменения, поэтому я нажимаю закрыть. Я ожидаю, что все будет как прежде...   -  person Ayeye Brazo    schedule 07.02.2017
comment
Вероятно, скрипка не нужна... есть весь код и модальное окно с простым текстом ввода с одним полем для обновления... Если хотите, я могу обновить вопрос, добавив строку HTML... <input type="text" ng-model="modal.room.number"> ничего больше.. .   -  person Ayeye Brazo    schedule 07.02.2017


Ответы (1)


В вашем RoomModalController глубоко скопируйте объект room, чтобы при обновлении модель также не обновлялась.

vm.room = angular.copy(room);

Теперь этот объект позаботится о модальной привязке и не будет мешать при изменении на объект корневой области vm.room.

Чтобы завершить сохранение этих данных, вы должны сохранить модальный объект vm.root в своей базе данных, а также обновить объект корневой области vm.room в соответствии с этими изменениями, внесенными в модальное окно.

person daan.desmedt    schedule 07.02.2017
comment
Круто, это помогло мне понять это: angular.copy добился цели! Спасибо за вашу помощь! - person Ayeye Brazo; 07.02.2017
comment
Отлично тебе помогло! :) - person daan.desmedt; 07.02.2017