离子 - 不能在函数内使用$ ionicModal

Question

我试图在异步操作之后使用$ ionicModal 。我所做的是将以下代码放在一个回调函数中，该函数在关联服务执行$ http调用后执行：

$ionicModal.fromTemplateUrl('templates/modals/profile-update.html', {
 scope: $scope
})
.then(instance => {
 vm.modal = instance;
})

当上面的代码放在控制器的主程序块中时，它可以正常工作。但是，在这种情况下，我希望它在函数 openProfilePopup 中。我已经尝试了以下代码，但它不起作用，模式没有显示，并且控制台中没有显示错误：

activate();

function activate() {
    profPopupService
        .get()
        .then(openProfilePopup, handleError);
}

function openProfilePopup(profile) {
    vm.profile = profile;

    $ionicModal.fromTemplateUrl('templates/modals/profile-update.html', {
        scope: $scope
    })
    .then(instance => {
        vm.modal = instance;
    })
    .catch(error => {
        $log.log(error);
    });
    vm.modal.show();
}

以下是模态的模板代码。我为模态使用了一个单独的控制器，而不是与上面代码相​​关的控制器。

<ion-modal-view cache-view="false">
  <ion-header-bar class="bar bar-header bar-dark">
    <div class="buttons">
      <button class="button-icon light ion-ios-arrow-back" ng-click="dashboard.modal.hide()"></button>
    </div>
    <h1 id="page-title" class="title">Update Your Profile</h1>
  </ion-header-bar>

  <ion-content class="profile-popup" ng-controller="ProfilePopupCtrl as pp">
    <form name="profileForm" method="POST" ng-submit="pp.update(profileForm.$valid)" novalidate>
      <!-- Not displaying here -->
    </form>
  </ion-content>
</ion-modal-view>

我的目标是从控制器获取数据，通过show（）函数启动模态并将该数据传递给模态控制器：

function ProfilePopupCtrl($log, $scope) {
   const vm = this;
   vm.user = $scope.$parent.dashboard.profile;
   .......
}

Answer 1

在.then()

中调用show方法

function openProfilePopup(profile) {
    vm.profile = profile;

    $ionicModal.fromTemplateUrl('templates/modals/profile-update.html', {
        scope: $scope
    })
    .then(instance => {
        vm.modal = instance;
        vm.modal.show();
    })
    .catch(error => {
        $log.log(error);
    });
}

或者

在函数外定义模态。只需在函数调用完成后调用模态的show方法。

.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-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();
  };

现在在函数

中

function openProfilePopup(profile) {
    $scope.profile = profile;
    $scope.openModal();    
}

如果您想使用控制器作为vm.something

，可以使用它作为语法