Ionic 1：控制器向模态框传数据方法及$modal未定义问题解决

你这是把AngularUI Bootstrap的$modal和Ionic自带的模态框服务搞混啦！Ionic有自己专属的模态框实现——$ionicModal，直接用$modal肯定会提示未定义。下面给你一步步拆解解决方案，顺便搞定数据传递的需求：

第一步：注入正确的Ionic模态框服务 #

首先，在你的父控制器里要注入$ionicModal，而不是$modal。示例代码如下：

angular.module('yourAppName')
.controller('ParentController', function($scope, $ionicModal) {
  // 后续模态框逻辑写在这里
});

第二步：创建模态框并传递数据 #

Ionic模态框支持多种数据传递方式，下面给你两种最常用的方案：

方案1：共享父作用域（最简单快捷） #

模态框默认会继承父控制器的$scope，所以父控制器里的$scope.items可以直接在模态框的模板和控制器中使用：

// 父控制器代码
$scope.items = ["预订项1", "预订项2", "预订项3"];

// 从模板创建模态框
$ionicModal.fromTemplateUrl('confirm_booking.html', {
  scope: $scope, // 共享父作用域
  animation: 'slide-in-up' // 可选的动画效果
}).then(function(modal) {
  $scope.modal = modal;
});

// 打开模态框的方法
$scope.openConfirmModal = function() {
  $scope.modal.show();
};

// 关闭模态框的方法
$scope.closeConfirmModal = function() {
  $scope.modal.hide();
};

// 页面离开时销毁模态框，避免内存泄漏
$scope.$on('$ionicView.beforeLeave', function() {
  $scope.modal.remove();
});

对应的模态框模板confirm_booking.html可以直接使用items：

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">确认预订</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeConfirmModal()">关闭</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <ul class="list">
      <li class="item" ng-repeat="item in items">{{item}}</li>
    </ul>
  </ion-content>
</ion-modal-view>

方案2：自定义隔离作用域（更灵活） #

如果不想共享整个父作用域，可以创建隔离的子作用域，针对性传递数据：

// 父控制器代码
var targetItems = ["预订项1", "预订项2", "预订项3"];

$ionicModal.fromTemplateUrl('confirm_booking.html', {
  scope: $scope.$new(true), // 创建隔离子作用域
  controller: 'confirm_bookCtl', // 指定模态框独立控制器
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  // 把数据赋值给模态框的隔离作用域
  $scope.modal.scope.items = targetItems;
});

// 打开模态框
$scope.openConfirmModal = function() {
  $scope.modal.show();
};

然后在你的confirm_bookCtl控制器里就能拿到数据了：

angular.module('yourAppName')
.controller('confirm_bookCtl', function($scope) {
  console.log($scope.items); // 这里就能获取到传递过来的预订数据
});

避坑提醒 #

• 一定要在页面离开时调用remove()销毁模态框，否则会造成内存泄漏
• 如果使用隔离作用域，要确保数据已经赋值给模态框作用域后再打开
• 牢记Ionic的模态框服务是$ionicModal，别再和AngularUI的$modal混淆啦！

内容的提问来源于stack exchange，提问作者shiv nayak