How to add function to this button

76 Views Asked by At

The button will only accept "$dismiss()". But I need it to accept any other function.

          var modalInstance = $uibModal.open({
            animation: this.animationsEnabled,
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            template: [
                '<div class="modal-content">',
                '<div class="modal-header">',
                '<h3 class="modal-title">Regulamin</h3>',
                '</div>',
                '<div class="modal-body">',
                '$1. Give us all your money!',
                '</div>',
                '<div class="modal-footer">',
                '<button class="btn btn-primary" ng-click="$ctrl.testing()">TESTING</button>',
                '</div>',
                '</div>'
              ].join(''),
            size: 'md'
          });
        };```
1

There are 1 best solutions below

0
joseglego On

The Example: You can see this plnkr: https://plnkr.co/edit/joQzMkafiDAgsjt0 working with one counter in the parent and increasing through one modal button, it is an example for your need.

The Issue: I would say the missing part is the scope or controller.

The Explanation: When you create a modal it has its own controller and it cannot access its parent scope. You have to refer to the specific functions which you need.

We can include the controller parameter to the $uibModal.open() and include all the extra information which we need. It'd look like:

var modalInstance = $uibModal.open({
  animation: this.animationsEnabled,
  ariaLabelledBy: 'modal-title',
  ariaDescribedBy: 'modal-body',
  template: [
    'YOUR TEMPLATE',
    '<button class="btn btn-primary" ng-click="$ctrl.testing()">TESTING</button>',
  ].join(''),
  size: 'md', 
  // THE NEW PART:
  controller: function($scope) {
    // Option 0: Regular version
    $scope.testing2 = $ctrl.testing

    // Option 1: (if you need to do extra stuff)
    $scope.testing = function () {
      console.log('A new cool function');
      $ctrl.testing();   // Your original testing
    }
  }  
});