Angularjs $ionicModal返回未定义的错误？

我正在尝试在单击时创建一个模式，我在前面尝试过代码，它可以正常工作，现在在新项目中尝试，并出现以下错误：

> 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>

细节
取消
{{scode.Name}
{{scode.currences[0].Symbol}{{{data1.Price}}

调用

$ionicModal.fromTemplateUrl

将返回一个承诺，该承诺通过模式实例解析：

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

---

调用

$ionicModal.fromTemplateUrl

将返回一个承诺，该承诺将通过模式实例解析：

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

---

请参见下面如何

$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();
  };
});

---

请参见下面如何

$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();
  };
});

---

确保模式初始化成功，您可以将错误记录在被拒绝的处理程序的Object{data:“Cannot GET/templates/modal.html”中↵", 状态：404，配置：对象，状态文本：“未找到”}配置：对象数据：“无法获取/templates/modal.html↵标题：（名称）状态：404 statusText:“未找到”“proto:Object‘我得到的响应，modal view>是否有任何问题？这意味着modal无法在位置

templates/modal.html

找到模板，如果您使用的是

webpack

，请确保输出包文件包含模板文件夹的正确路径，或者您可以使用

ngtemplate loader

将模板包含到bundlehi Marko中，我用模式更新了问题，请帮助，相同的代码正在其他项目中工作，可能会出现什么问题？确保模式初始化成功，您可以在被拒绝的处理程序的对象{数据中记录错误：“无法获取/templates/modal.html↵，状态：404，配置：对象，状态文本：“未找到”}配置：对象数据：“无法获取/templates/modal.html↵标题：（名称）状态：404 statusText:“未找到”“proto:Object‘我得到的响应，modal view>是否有任何问题？这意味着modal无法在位置

templates/modal.html

找到模板，如果您使用的是

webpack

，请确保输出包文件包含模板文件夹的正确路径，或者您可以使用

ngtemplate loader

将模板包含到bundlehi Marko中，我用modal更新了问题，请帮助，相同的代码正在其他项目中工作，可能会出现什么问题？您将脚本模板放在哪里了？在尝试将id更改为

/templates/modal.html

之后和之前，另外，将fromTemplateUrl的第一个参数更改为

/templates/modal.htm

，有时angular可能会找到具有相对路径的错误文件位置！不走运。仍然是相同的错误嗯，这很奇怪，您可以尝试将模板放在一个没有脚本标记的单独文件中，您将脚本模板放在了哪里？在尝试将id更改为

/templates/modal.html

之后和之前，还可以将fromTemplateUrl的第一个参数更改为

/templates/modal.htm

，有时angular可能会找到一个相对路径错误的文件位置！不走运。还是一样的错误嗯，这很奇怪，你可以试着把模板放在一个没有脚本标签的单独文件中，