Передача параметров в $ 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

Как указано scope: $scope в определении $ionicModal.fromTemplateUrl(), модальный наследует родительскую область.

Таким образом, вы можете передать аргументы $scope.openReceiptModal() в контроллер $ объем:

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

На данный момент selectedBusinessNoCategory и selectedDummyService наследуются (вместе с областью родительского контроллера) модальным объема, и вы можете использовать их в вашем модальном шаблоне.

Ниже приведен пример: http://codepen.io/beaver71/pen/ZQwwgb