I'm trying to improve my Angular skills by writing some basic applications that use a particular feature. The following application uses the UI Bootstrap modal to add users to a list, or remove them again.
Any feedback on any part of the code is very much appreciated, but I have some specific concerns around the way data is passed between the modal and the parent scope. It can be done by either setting scope=$scope
in the $uibModal
options, or by using resolve. Which is better in this scenario and why?
Here's an extract from the main controller:
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'add_user.html',
controller: 'ModalController',
scope: $scope
});
modalInstance.result.then(function(res){
$scope.userGroup = res;
});
};
and here's an extract from the modal controller:
$scope.modalUserGroup = angular.copy($scope.userGroup);
$scope.add = function(){
$scope.modalUserGroup.push($scope.newUser);
};
$scope.delete = function(userIndex){
$scope.modalUserGroup.splice(userIndex, 1);
};
$scope.save = function() {
$uibModalInstance.close($scope.modalUserGroup);
};
Here's the plunk. I've also written up my notes on it encase it's useful to anyone else.