Question

在为Angular实现Bootstrap UI模式时，它看起来像是控制器和模态实例之间的双向数据绑定。我以为模态会被孤立。我做错了什么？只有在用户关闭模态时才应用用户对数据所做的更改。

控制器

$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());
    });
  };

模态实例控制器

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

See Plunkr

Answer 1

应该创建要解析为模态的对象的深层副本

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

Angular.copy

Forked Plnkr

角度引导UI模式中无意义的双向数据绑定

1 个答案: