2015-08-20 51 views
0

在實現用於Angular的引導UI模式時,它看起來像是控制器和模式實例之間的雙向數據綁定。我認爲模態會被隔離。我做錯了什麼?只有當用戶關閉模式時,纔會應用用戶對數據所做的更改。角度引導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

回答

0

可能需要創建你解決的模式

對象的深層副本0
activeTopic: function() { 
     return angular.copy(topicData); 
}, 

Angular.copy

Forked Plnkr

+0

這個答案看起來是正確的,但我很好奇,爲什麼模態並不是一個孤立的範圍。此提問者也有類似的,雖然相反的問題:http://stackoverflow.com/questions/23518835/angular-ui-modal-2-way-binding-not-working – greener

+0

所以topicData被通過引用傳遞給模態。所以當使用angular.copy時,它會傳遞對象的副本而不是對現有對象的引用。 – Teliren