イオンポップオーバー、TypeError例外：プロパティを読み取ることができません「ショー」

Question

私はポップオーバー

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

}]) 

ですが、私はNAVをクリックしたとき私はここに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> 

Answer 1

Fiddle予想される動作です。

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

私が考えることができる唯一の状況は、「popover.html」というIDのテンプレートが定義されていないことです。

Answer 2

ほとんどの場合、popover.htmlファイルは 'templates'などのサブフォルダのどこかに保存され、htmlファイルを参照するコントローラには完全修飾パスがありません。ファイルpopover.html。