Question

我正在开发适用于iPad的Ionic-tabs-app。在我的一个模板中，我点击打开一个ionicModal。没有参数，一切都很好。但现在我想给模态赋予参数。我看到了一个使用fromTemplateUrl的旧变种的例子。但我必须使用返回promise的新变体。

这是调用模态的方法的原始代码：

$scope.showTypeOfTest = function (type_of_test_id) {
    return $ionicModal.fromTemplateUrl('templates/type-of-test.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });
$scope.openModal = function () {
    $scope.modal.show();
};

然后我尝试将此ID提供给模态，但它不起作用，因为ng-controller绑定到另一个模板的控制器在执行fromTemplateUrl方法之后和$ scope之前调用。模态设定。我如何传递此变体中的参数？

以下是我自己尝试的代码，但不起作用：

$scope.showTypeOfTest = function (type_of_test_id) {
    $scope.type_of_test_id = type_of_test_id;
    return $ionicModal.fromTemplateUrl('templates/type-of-test.html', function ($ionicModal) {
        $scope.modal = $ionicModal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });
};
$scope.openModal = function () {
    $scope.modal.show();
};

Answer 1

将数据附加到范围对我来说工作正常，查看代码段，相反，如果您不想将数据附加到范围并且您使用控制器进行模式，则可以使用事件

angular.module('ionicApp', ['ionic'])

.controller('AppCtrl', function($scope, $ionicModal) {
  
  $scope.contacts = [
    { name: 'Gordon Freeman' },
    { name: 'Barney Calhoun' },
    { name: 'Lamarr the Headcrab' },
  ];

  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  
  $scope.openModalWithData = function(contact, propagateEvent) {        
    var fullName = contact.name.split(' ')
    var userToEdit = {firstName: fullName[0], lastName: fullName[1]};
    $scope.modal.show();
    if( propagateEvent ) {
      $scope.$broadcast('setEditUser', userToEdit)
    } else {
      $scope.editUser = userToEdit;
    }
  };

})

.controller('ModalController', function($scope) {
  
  $scope.$on('setEditUser', function($event, editUser) {
    alert('setting the user')
     $scope.editUser = editUser;  
  })
})

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

    <link href="//code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="contact in contacts" ng-click="openModalWithData(contact, $index == 1)">
          {{contact.name}}
        </ion-item>
      </ion-list>
    </ion-content>
    
    <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view ng-controller="ModalController as vc">
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">Edit Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="editUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="editUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="editUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="createContact(newUser)">Save</button>
            
      
          </div>
        </ion-content>
      </ion-modal-view>
    </script>
    
  </body>
</html>

....
$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
    $rootScope.$broadcast("dataForModal", {some: 'infos'});//be sure to inject the $rootScope
  };
  .....

然后在你的模态控制器里面

$scope.$on('dataForModal', handleReceivedData);
function handleReceivedData($event, data) {
    //watherever you need to do with data
}

如何使用fromTemplateUrl的新变量将参数传递给Ionic模态？

1 个答案: