离子模态未打开（类型错误：无法读取未定义的属性“显示”）？答案

【问题标题】：Ionic Modal not opening (TypeError: Cannot read property 'show' of undefined)?离子模态未打开（类型错误：无法读取未定义的属性“显示”）？
【发布时间】：2015-02-04 17:50:23
【问题描述】：

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

TypeError：无法读取未定义的属性“显示” Scope.$scope.openModal (homeModule.js:18) 在新 (homeModule.js:59) 在 Object.invoke (ionic.bundle.js:11994) 在 $get.extend.instance (ionic.bundle.js:16247) 在 ionic.bundle.js:15502 在 nodeLinkFn 的 forEach (ionic.bundle.js:8155) (ionic.bundle.js:15501) 在compositeLinkFn (ionic.bundle.js:14887) 在 publicLinkFn (ionic.bundle.js:14766) 在 IonicModule.controller.self.appendViewElement (ionic.bundle.js:47324)

我的控制器看起来像这样（它的开头）：

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

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

【问题讨论】：

标签： javascript android angularjs ionic-framework

【解决方案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);
});

【讨论】：

我按照你说的做了，但不幸的是它没有用......我是 Ionic 的新手，但据我所知，以及我看到的文档，它是正确的.. .但是，它仍然告诉我“无法读取未定义的属性'显示'”......也许它与AngularJS有关？我正在使用 ionic.bundle.js ......而且，console.log 仍然向我显示了定义的模式，但我无法打开它
我想我找到了一个临时解决方案，因为我认为这不是最佳做法......我在定义 $ionicModal 时打开了它，在 .then 函数中它...但我不知道这样做是否最好
我遇到了类似的问题，因为我没有添加插件：cordova plugin add github.com/VitaliiBlagodir/cordova-plugin-datepicker.git

【解决方案2】：

我想我找到了解决办法。我试图从“if”语句中打开模式，一旦我从“if”中取出它，它就工作得很好。无论如何，谢谢布拉德。

【讨论】：