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

在scope: $scope定义中指定$ionicModal.fromTemplateUrl()时，模态会继承父作用域。

因此，您可以将$scope.openReceiptModal()的参数传递给控制器$ scope：

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

此时selectedBusinessNoCategory和selectedDummyService被模态范围继承（与父控制器范围一起），您可以在模态模板中使用它们。

以下是一个示例：http://codepen.io/beaver71/pen/ZQwwgb

将参数传递给$ ionicModal

1 个答案: