javascript - 将参数传递到 $ionicModal

Question

将参数传递到 $ionicModal 的最佳方法是什么？以便可以在模态中使用这些值(即 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>

Answer 1

当您在 $ionicModal.fromTemplateUrl() 定义中指定 scope: $scope 时，模式会继承父范围。

因此您可以将 $scope.openReceiptModal() 的参数传递给 Controller ​​ $scope:

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

此时，selectedBusinessNoCategory 和 selectedDummyService 由模态范围继承(与父 Controller 范围一起)，您可以在模态模板中使用它们。

这是一个示例:http://codepen.io/beaver71/pen/ZQwwgb