Ионный модальный не открывается

Question

Я недавно попытался создать ионный модальный. Я начал с рассмотрения нескольких примеров, которые я нашел в Интернете, но я не могу заставить их работать. Может кто-нибудь сказать мне, где я ошибаюсь? Заранее спасибо :)

Calling модальный:

<button class="ion-ios-information-outline button button-clear" ng-click="openModal()"></button> 

JS:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) { 

    /* Modal */ 
$ionicModal.fromTemplateUrl('intro-modal.html', { 
    scope: $scope, 
    animation: 'slide-in-up' 
    }).then(function(modal) { 
    $scope.modal = modal 
    }) 

    $scope.openModal = function() { 
    $scope.modal.show() 
    } 

    $scope.closeModal = function() { 
    $scope.modal.hide(); 
    }; 

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

Модальная страница:

<script id="intro-modal.html" type="text/ng-template"> 
    <div class="modal"> 
    <ion-header-bar> 
     <h1 class="title">Edit Contact</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Name</span> 
      <input type="text" ng-model="contact.name"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Info</span> 
      <input type="text" ng-model="contact.info"> 
     </label> 
     </div> 

     <button class="button button-full button-energized" ng-click="closeModal()">Done</button> 
    </ion-content> 
    </div> 
</script> 

Answer 1

Есть вещи, которые вы должны проверить:

1. является контроллером, созданным экземпляром? Вызывается функция, вызванная внутри контроллера в представлении? Можете ли вы успешно позвонить другим функциям? Попробуйте добавить туда еще одну кнопку: ng-click="test()" и в контроллере добавить $scope.test = function() { console.log('it works'); }; и посмотреть, влияет ли нажатие кнопки на консоли.

2. Другая вещь, ионные модальные документы http://ionicframework.com/docs/api/service/ $ ionicModal/

Я думаю, что страница модальный должна быть обернута в ионно-модальной вид контейнера:

<script id="my-modal.html" type="text/ng-template"> 
    <ion-modal-view> 
    <ion-header-bar> 
     <h1 class="title">Edit Contact</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Name</span> 
      <input type="text" ng-model="contact.name"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Info</span> 
      <input type="text" ng-model="contact.info"> 
     </label> 
     </div> 
     <button class="button button-full button-energized" ng-click="closeModal()">Done</button> 
    </ion-content> 
    </ion-modal-view> 
</script> 

Answer 2

Попробуйте удалить

<script id="my-modal.html" type="text/ng-template"> 

тег вашего шаблона, оставьте только содержание внутри th e html, и, как сказал @wiherek, используйте ионно-модальный вид.

Так что ваш шаблон мой-modal.html должен в конечном итоге, как это:

<ion-modal-view> 
    <ion-header-bar> 
     <h1 class="title">Edit Contact</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Name</span> 
      <input type="text" ng-model="contact.name"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Info</span> 
      <input type="text" ng-model="contact.info"> 
     </label> 
     </div> 
     <button class="button button-full button-energized" ng-click="closeModal()">Done</button> 
    </ion-content> 
    </ion-modal-view>