离子弹出,TypeError:无法读取属性'show'

时间:2016-08-23 13:51:32

标签: javascript ionic-framework popover ionic-popover

我有一个导航按钮,应该显示一个弹出窗口

<ion-nav-buttons side="secondary">
    <button class="button button-icon icon ion-more" ng-click="openPopover($event)"></button>
</ion-nav-buttons>

这是控制器

.controller('MyController', ['$scope','$ionicPopover', function($scope, $ionicPopover) {

    $ionicPopover.fromTemplateUrl('popover.html', {
      scope: $scope
    }).then(function(popover) {
      $scope.popover = popover;
    });
    $scope.openPopover = function($event) {
      $scope.popover.show($event);
    };
    $scope.closePopover = function() {
      $scope.popover.hide();
    };
    $scope.$on('$destroy', function () {
        $scope.popover.remove();
    });

}])

但是当我点击导航按钮时,我面对TypeError: Cannot read property 'show' of undefined at Scope.$scope.openPopover

这是我在同一个项目文件夹中的模板

<ion-popover-view>
  <ion-content>
    <div class="list">
      <label class="item item-input" ng-click="addFavorite(dish.id)">
        <div class="input-label">
          Add To Favorites
        </div>
      </label>
      <label class="item item-input" ng-click="openModal()">
        <div class="input-label">
          Add A Comment
        </div>
      </label>
    </div>
  </ion-content>
</ion-popover-view>

2 个答案:

答案 0 :(得分:1)

带有预期行为的

SELECT AFTER INSERTION

<div ng-click="openPopover($event)">
   Click to open popover
</div>

<script id="popover.html" type="text/ng-template">
   <ion-popover-view>
    <ion-header-bar>
       <h1 class="title">My Popover Title</h1>
    </ion-header-bar>
    <ion-content>
          Hello!
    </ion-content>
   </ion-popover-view>
</script>

我能想到的唯一情况是你没有定义id为“popover.html”的模板。

答案 1 :(得分:0)

这里的问题很可能是popover.html文件保存在子模块中某处,如“模板”或类似文件,并且引用html文件的控制器没有完整的限定路径,脚本只是找不到文件popover.html。