Pass variable to UI-bootstrap modal without using

Question

Since I am a beginner using AngularJS the $scope approach to pass data between different controllers and (in my case) a modal drives me crazy. Due to that reason, I googled around the web and found an interesting blogpost about passing data to a UI-bootstrap modal without using $scope.

I had a deeper look at this blogpost and the delivered plunk which works pretty nice and started to adopt this to my own needs.

What I want to achieve is to open a modal delivering an text input in which the user is able to change the description of a given product. Since this would provide more than a minimal working example I just broke everything down to a relatively small code snippet available in this plunk.

Passing data from the main controller into the modal seems to work as the default product description is displayed in the modal text input as desired. However, passing the data back from the modal to the main controller displaying the data in index.html does not seem to work, since the old description is shown there after it was edited in the modal.

To summarize my two questions are:

1. What am I doing wrong in oder to achieve a 'two-way-binding' from the main controller into the modal's text input and the whole way back since the same approach works in the mentioned blogpost (well, as the approach shown in the blogpost works there must be something wrong with my code, but I cannot find the mistakes)
2. How can I implement a proper Accept button in order to accept the changed description only if this button is clicked and discard any changes in any other case (clicking on Cancel button or closing the modal by clicking next to it)?

Answer 1

In your main controller, create two resolver functions: getDescription and setDescription.

In your modal controller, use them.

Your modal HTML

<div class="modal-header">
    <h3 class="modal-title">Test Text Input in Modal</h3>
</div>
<div class="modal-body">
    Product description:
    <input type="text" ng-model="modal.description">
</div>
<div class="modal-footer">
    <button ng-click="modal.acceptModal()">Accept</button>
    <button ng-click="modal.$close()">Cancel</button>
</div>

Your main controller

function MainCtrl($modal) {
  var self = this;
  self.description = "Default product description";

  self.DescriptionModal = function() {
    $modal.open({
      templateUrl: 'modal.html',
      controller: ['$modalInstance', 
                   'getDescription', 
                   'setDescription', 
                    ModalCtrl
                  ],
      controllerAs: 'modal',
      resolve: {
        getDescription: function() {
          return function() { return self.description; };
        },
        setDescription: function() {
          return function(value) { self.description = value; };
        }
      }
    });
  };
};

Your modal controller

function ModalCtrl($modalInstance, getDescription, setDescription) {
  var self = this;
  this.description = getDescription();

  this.acceptModal = function() {
    setDescription(self.description);
    $modalInstance.close();
  };
}