Angular UI Bootstrap Modal scope

Question

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.

Answer 1

Since your code is not huge and it seems clean so far, my suggestion will focus on your question about the best way to share controller data.

You could try the bindToController option when creating the modal, so it shares the same scope as the parent controller

In this post, you will find further information with an example.