Question

我有这个模板，并在该模板上创建了Ionic Modal。当我创建按钮以打开模态时，它会出现错误，“GET http://localhost:8100/user_photo.html 404 (Not Found)”和

TypeError: Cannot read property 'show' of undefined at Scope.$scope.openModal (controllers.js:275) at ChildScope.$scope.showUser (controllers.js:291) at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:420) at ionic.bundle.js:65427 at ChildScope.$eval (ionic.bundle.js:30395) at ChildScope.$apply (ionic.bundle.js:30495) at HTMLDivElement.<anonymous> (ionic.bundle.js:65426) at defaultHandlerWrapper (ionic.bundle.js:16787) at HTMLDivElement.eventHandler (ionic.bundle.js:16775) at triggerMouseEvent (ionic.bundle.js:2953) (anonymous) @ ionic.bundle.js:26794 (anonymous) @ ionic.bundle.js:23507 $apply @ ionic.bundle.js:30500 (anonymous) @ ionic.bundle.js:65426 defaultHandlerWrapper @ ionic.bundle.js:16787 eventHandler @ ionic.bundle.js:16775 triggerMouseEvent @ ionic.bundle.js:2953 tapClick @ ionic.bundle.js:2942 tapMouseUp @ ionic.bundle.js:3018

之前我遵循了与之前相同的步骤，但之后效果很好，但突然当我尝试重复相同的步骤时，它会给出上述错误。我在这里做错了什么？

下面显示了我使用的代码！

按钮打开模态。

<div class="image-cropper" ng-click="openModal()">
    <img ng-src="{{x.imageURL}}" class="rounded" id="img-hehe" />
</div>

模态脚本

<script id="user_photo.html" type="text/ng-template">
      <div class="modal image-modal transparent" on-swipe-down="closeModal()">
        <!-- <div class="buttons">
          <button class="button button-clear" style="color: white" ng-click="closeModal()">Close</button>
        </div> -->
          <ion-scroll direction="xy"
                      zooming="true" min-zoom="1" style="width: 100%; height: 100%"
                      overflow-scroll="false">
              <div class="image" style="background-image: url( {{profilePicImage}} )"></div>
          </ion-scroll>
      </div>
  </script>

控制器代码

  $ionicModal.fromTemplateUrl('user_photo.html', { // Use Ionic Modal to show user photo
      scope: $scope,
      animation: 'slide-in-up'
  }).then(function(modal) {
      $scope.modalX = modal;
  });
  $scope.openModal = function() {
      $scope.modalX.show();
  };
  $scope.closeModal = function() {
      $scope.modalX.hide();
  };
  $scope.$on('$destroy', function() {
      $scope.modalX.remove();
  });

离子模态GET错误

0 个答案: