Неинтенсивное двустороннее связывание данных в угловом моде с начальной загрузкой

0

При реализации модального модуля Bootstrap для Angular это похоже на двухстороннее связывание данных между контроллером и модальным экземпляром. Я думал, что модальная будет изолирована. Что я делаю неправильно? Изменения, внесенные пользователем в данные, должны применяться только тогда, когда пользователь закрывает модальный.

контроллер

$scope.selectedTopic = {
    topicId : 'ABC',
    tags    : [1,3]
  }

  $scope.open = function (size) {

    var topicData = { id: $scope.selectedTopic.topicId, tags: $scope.selectedTopic.tags };
    var aTags = {
        tags: [
            {name:'foo', id: 1},
            {name:'bar', id: 2},
            {name:'robo', id: 3},
            {name:'lino', id: 4},
          ]
      }

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        activeTopic: function() {
          return topicData;
        },
        availableTags: function() {
           return aTags;
        }
      }
    });

    modalInstance.result.then(function (activeTopic) {
      $scope.selectedTopic.tags = activeTopic.tags;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

Контроллер Modal Instance

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl',
      function ($scope, $modalInstance,  availableTags, activeTopic) {

   $scope.availableTags    = availableTags;
   $scope.activeTopic      = {
      id: activeTopic.id,
      tags: activeTopic.tags
   };


  $scope.ok = function () {
    $modalInstance.close($scope.activeTopic);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

См. Plunkr

Теги:
angularjs-scope

1 ответ

0
Лучший ответ

Возможно, вы должны создать глубокую копию объекта, который вы разрешаете модальному

activeTopic: function() {
      return angular.copy(topicData);
},

Angular.copy

Forked Plnkr

  • 0
    Этот ответ выглядит правильно, но мне любопытно, почему модальное пространство не является изолированным. Этот вопрос также имел аналогичную, хотя и противоположную проблему: stackoverflow.com/questions/23518835/…
  • 0
    Таким образом, topicData передается модальному адресу по ссылке. Таким образом, при использовании angular.copy передается копия объекта вместо ссылки на существующую.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню