При реализации модального модуля 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');
};
});
Возможно, вы должны создать глубокую копию объекта, который вы разрешаете модальному
activeTopic: function() {
return angular.copy(topicData);
},