CODEWITHSUNDEEP
javascriptangularjsionic-framework
methuselah
methuselah

Reputation: 13206

Passing parameters into $ionicModal

What is the best way to pass a parameter into an $ionicModal so that the values can be used in the modal (i.e. receipt.html).

confirm.html

<a 
  class="button button-stable" 
   style="border-radius:0px" 
   ng-click="openReceiptModal(selectedBusinessNoCategory.id, selectedDummyService.id)">
   View Receipt
</a>

controller.js

  $ionicModal.fromTemplateUrl('templates/receipt.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.receiptModal = modal;
  })

  $scope.openReceiptModal = function() {
    $scope.receiptModal.show()
  }

  $scope.closeReceiptModal = function() {
    $scope.receiptModal.hide();
  };

  $scope.$on('$destroy', function() {
    $scope.receiptModal.remove();
  });

receipt.html

<ion-content>
    <div class="list">
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">To</p></div>
                <div class="col col-50"><p style="small">{name}</div>
            </div>
        </div>
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">For</p></div>
                <div class="col col-50"><p style="small">{{selectedBusiness.title}}</div>
            </div>
        </div>
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">Appointment Date</p></div>
                <div class="col col-50"><p style="small">{{selectedBusiness.date}}</div>
            </div>
        </div>
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">Confirmation</p></div>
                <div class="col col-50"><p style="small">{{selectedBusiness.confirmation}}</div>
            </div>
        </div>
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">Method</p></div>
                <div class="col col-50"><p style="small">{{selectedBusiness.method}}</div>
            </div>
        </div>
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">Amount</p></div>
                <div class="col col-50"><p style="small">&pound;{{selectedService.price}}</div>
            </div>
        </div>
        <div class="item item-input-inset">
            <div class="row">
                <div class="col"><p style="small">Cancellation Fee</p></div>
                <div class="col col-50"><p style="small">&pound;{{selectedService.price}}</div>
            </div>
        </div>
    </div>
</ion-content>

Upvotes: 0

Views: 425

Answers (1)

beaver
beaver

Reputation: 17647

As you specified scope: $scope in the $ionicModal.fromTemplateUrl() definition, the modal inherits the parent scope.

So you can pass the arguments of $scope.openReceiptModal() to the controller $scope:

  $scope.openReceiptModal = function(_selectedBusinessNoCategory, _selectedDummyService) {
    $scope.selectedBusinessNoCategory = _selectedBusinessNoCategory;
    $scope.selectedDummyService = _selectedDummyService;
    $scope.receiptModal.show()
  }

At this point selectedBusinessNoCategory and selectedDummyService are inherited (together with the parent controller scope) by the modal scope and you can use them in your modal template.

Here is an example: http://codepen.io/beaver71/pen/ZQwwgb

Upvotes: 1

Related Questions