javascript - Ionic Modal 未打开(TypeError : Cannot read property 'show' of undefined)?

Question

我正在制作一个 ionic + angularJs 应用程序，具体来说是针对 Android 的。我不知道为什么，但是在我如此命名的 homeController 中，每当我试图调用一个函数来显示一个 $ionicModal 时，它都会给我一个错误...

TypeError: Cannot read property 'show' of undefined at Scope.$scope.openModal (homeModule.js:18) at new (homeModule.js:59) at Object.invoke (ionic.bundle.js:11994) at $get.extend.instance (ionic.bundle.js:16247) at ionic.bundle.js:15502 at forEach (ionic.bundle.js:8155) at nodeLinkFn (ionic.bundle.js:15501) at compositeLinkFn (ionic.bundle.js:14887) at publicLinkFn (ionic.bundle.js:14766) at IonicModule.controller.self.appendViewElement (ionic.bundle.js:47324)

我的 Controller 看起来像这样(它的开始):

app.controller('homeController', function($scope, $ionicPopup, $state, $ionicLoading, $rootScope, $ionicModal, mapFactory){
    // Load the modal from the given template URL
    $ionicModal.fromTemplateUrl('templates/loginModal.html', function($ionicModal) {
      $scope.modal = $ionicModal;
      console.log($scope.modal);
    }, {
      scope: $scope,
      animation: 'slide-in-up',
      backdropClickToClose: false,
      hardwareBackButtonClose: false,
      focusFirstInput: true
    });
    $scope.openModal = function() {
        $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };

我已经尝试了很多不同的方法来打开模式，有趣的是，每当我进入一个新的 $state 并返回时，它都会打开......但不是在我刷新页面时。另外，我做了一个 console.log($scope.modal) 来查看我的变量是否被设置，结果是:

ionic.Utils.inherit.child {focusFirstInput: true, unfocusOnHide: true, focusFirstDelay: 600, backdropClickToClose: false, hardwareBackButtonClose: false…}$el: JQLite[1]animation: "slide-in-up"backdropClickToClose: falseel: div.modal-backdropfocusFirstDelay: 600focusFirstInput: truehardwareBackButtonClose: falsemodalEl: ion-modal-view.modalscope: ChildScopeunfocusOnHide: trueviewType: "modal"__proto__: ionic.Utils.inherit.Surrogate 

谁能帮我解决这个问题？提前致谢。

Answer 1

错误意味着 $scope.modal 没有被创建——你调用 fromTemplateUrl 是不对的。第二个参数是模态选项，您正在传递一个回调。

文档提供了一个 good example .

在您的例子中，对 fromTemplateUrl 的调用应该更像这样:

$ionicModal.fromTemplateUrl('templates/loginModal.html', {
  scope: $scope,
  animation: 'slide-in-up',
  backdropClickToClose: false,
  hardwareBackButtonClose: false,
  focusFirstInput: true
}).then(function(modal) {
  $scope.modal = modal;
  console.log($scope.modal);
});