Question

我正在尝试在点击上创建一个模态，我之前尝试过这个代码并且它正在运行，现在在新项目中尝试它并收到此错误：

> TypeError: Cannot read property 'show' of undefined at
> Scope.$scope.openModal (controllers.js:64) at fn (eval at compile
> (ionic.bundle.js:27615), :4:288) at ionic.bundle.js:65290 at
> Scope.$eval (ionic.bundle.js:30372) at Scope.$apply
> (ionic.bundle.js:30472) at HTMLDivElement. (ionic.bundle.js:65289) at
> defaultHandlerWrapper (ionic.bundle.js:16764) at
> HTMLDivElement.eventHandler (ionic.bundle.js:16752) at
> triggerMouseEvent (ionic.bundle.js:2953) at tapClick
> (ionic.bundle.js:2942)

这是代码：

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

$scope.openModal = function(scode) {

$scope.mcode = scode;

 $scope.modal.show();
}

这是模态视图，因为错误表明它不是项目中URL的获取路径：请参阅模态代码

<script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-dark">
          <h1 class="title">Details</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="modal">

<div style="font-size:3.2vw" ng-repeat="title in scode.Legs | filter:selectedId"  >

     <span ng-repeat="charge in scode.Itineraries | filter: selectedId "  >

      <div class="list card" style="padding:5vw" ng-repeat="data1 in charge.PricingOptions ">


              <span ng-repeat="bong in data1.Agents">
              <span ng-repeat="scode in scode.Agents | filter: bong">  
              <i>{{scode.Name}}</i>
              </span>
              </span>

          <a class="button button-outline button-positive"  style="padding-bottom:4vw;font-size:3vw;position:absolute;right:5px;line-height: 10vw !important;
    min-height: 10vw !important;" ng-click="openCordovaWebView(data1.DeeplinkUrl)">{{scode.Currencies[0].Symbol}}{{data1.Price}}</a>


            </div>


        </span>

 </div>
        </span>
</div>

</div>
        </ion-content>
      </ion-modal-view>
    </script>

Answer 1

调用$ionicModal.fromTemplateUrl将返回一个使用模态实例解析的promise：

   $ionicModal.fromTemplateUrl('templates/modal.html', {
       scope: $scope,
       animation: 'slide-in-up'
   }).then(function(modal){
       $scope.modal = modal;
   }, function(reason){
       console.log(reason);
   })

Answer 2

了解$scope.openModal和$scope.closeModal如何负责下面的开启和关闭模式。

查看：

<ion-view> <ion-content> <button ng-click="openModal()">Open modal</button> </ion-content> </ion-view> <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> <button ng-click="closeModal()">Close Modal</button> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-modal-view> </script>

<强>控制器：

angular.module('testApp', ['ionic']) .controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); //shows modal $scope.openModal = function() { $scope.modal.show(); }; // hides modal, not destroy $scope.closeModal = function() { $scope.modal.hide(); }; });

$ ionicModal返回未定义的错误？

2 个答案: