Javascript $ionicModal未启动

我想在我的一个html视图中打开一个模式。我正在构建一个ionic应用程序，但它没有启动

new_reflection.html

<ion-view view-title="New Referral">
    <ion-nav-bar class="bar-stable">
    <ion-nav-buttons side="left">
        <button class="button button-small">Cancel</button>
    </ion-nav-buttons>  
  </ion-nav-bar>
  <ion-content>
    <div class="row">
      <label class="button button-energized" ng-click="addImage()">
        Add image
      </label><br><br>
        <ion-scroll>
          <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" ng-click="showImages($index)" class="image-list-thumb" height="50px"/>
        </ion-scroll>
    </div>
 </ion-content>
</ion-view>
<script id="my-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>

app.js配置

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
  $stateProvider

.state('login', {
    url: "/login",
    //abstract: true,
    templateUrl: "templates/login.html",
    controller: 'AppCtrl'
  })

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'MainCtrl'
  })

.state('app.new', {
    url: "/new_referral",
    views: {
      'menuContent': {
        templateUrl: "templates/new_referral.html"
      }
    }
  })

$urlRouterProvider.otherwise('/login');

});

---

我的模式脚本必须在index.html文件中吗？它不能在另一个文件中，我从那里调用它吗？感谢您的帮助。我只需要在单击addImage（）按钮时打开模式，您需要调用：

$scope.modal.show（）以显示模式

试着这样做：

<label class="button button-energized" ng-click="addImage($event)">
    Add image
  </label>


$scope.addImage = function($event) {

console.log("add image");
$ionicModal.fromTemplateUrl('my-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  $scope.modal.show($event);
});

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

$scope.$on('$destroy', function() {
  $scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
  // Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
  // Execute action
});


添加图像
$scope.addImage=函数（$event）{
console.log（“添加图像”）；
$ionicModal.fromTemplateUrl（'my-modal.html'{
范围：$scope，
动画：“向上滑动”
}).then（功能（模态）{
$scope.modal=modal；
$scope.modal.show（$event）；
});
$scope.closeModal=函数（）{
$scope.modal.hide（）；
};
$scope.$on（“$destroy”，函数（）{
$scope.modal.remove（）；
});
//对隐藏模式执行操作
$scope.$on（'modal.hidden'，function（）{
//执行操作
});
//对移除模式执行操作
$scope.$on（'modal.removed'，function（）{
//执行操作
});

}
正如@DanielSchott所说，您需要调用函数openModal来发送显示命令

在
$scope.addImage
的末尾添加
$scope.modal.show（）

或者简单地执行以下操作：

$ionicModal.fromTemplateUrl('my-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  $scope.modal.show();
});

}
您从未错误地调用openModal（）或$scope.modal.show（）！离子模态不需要事件参数。当您添加这个：$scope.modal.show（$event）时，您正在混淆ion popOver的工作原理；（$event是不必要的）我添加了以下focusFirstInput:false，backdropClickToClose:true，hardwareBackButtonClose:true，modalCallback:null，但是模式是全屏的。我只是希望它像一个覆盖在主页上。有什么帮助吗？感谢@SjoerdDeWit您的修复帮助我启动了modalfiring@aorfevre你是对的，不需要通过$event，但至少让我了解了我在做什么right@KingsleySimon也许对你有帮助，但答案是错的。我引述：“您需要$event参数才能知道模式的打开位置：”这是完全错误的，不应验证，因为这可能会导致其他人混淆，但模式是全屏的。我只想它是一个覆盖在当前页面。
$ionicModal.fromTemplateUrl('my-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  $scope.modal.show();
});