AngularJS×OnsenUIで開発を行っています。
OnsenUIのpopover内にng-clickをセットしても、イベントとして検知されません。
(Plunkerにソースを置いています)
解決方法はありますでしょうか?
どなたかわかる方いらっしゃいましたら、ご教示いただけると幸いです。
plunkerにソースがあります。
何卒、よろしくお願い申し上げます。
---------- HTML(index) ----------
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.2.1/js/onsenui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.2.1/css/onsenui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.2.1/css/onsen-css-components.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.2.1/css/onsen-css-components-blue-basic-theme.css" />
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>-->
<link rel="stylesheet" href="bootstrap.css" />
<script src="script.js"></script>
</head>
<body>
<ons-page ng-controller="AppController" class="page">
<div class="navigation-bar">
<div class="navigation-bar__left"></div>
<div class="navigation-bar__center">
Popover
</div>
</div>
<div style="text-align: center">
<br />
<br />
<ons-button id="button" ng-click="showMenu('#button')">Click me!</ons-button>
</div>
</ons-page>
</body>
</html>
---------- HTML(popoverに表示する内容) ----------
<ons-template id="popover_menu">
<div ng-controller="AppController">
<ons-popover cancelable style="width: 95%; max-width: 300px;" direction="down">
<ons-row>
<ons-col class="pop-menu-item-col" ng-click="hideMenu()">
<ons-icon icon="ion-upload" class="pop-menu-item-icon"></ons-icon>
<div class="pop-menu-item-label">アップロード</div>
</ons-col>
<ons-col class="pop-menu-item-col" ng-click="hideMenu()">
<ons-icon icon="ion-folder" class="pop-menu-item-icon"></ons-icon>
<div class="pop-menu-item-label">フォルダを作成</div>
</ons-col>
<ons-col class="pop-menu-item-col" ng-click="hideMenu()">
<ons-icon icon="ion-edit" class="pop-menu-item-icon"></ons-icon>
<div class="pop-menu-item-label">編集</div>
</ons-col>
</ons-row>
</ons-popover>
</div>
</ons-template>
---------- Javascript ----------
var app = angular.module('myApp',['onsen','ui.bootstrap']);
app.controller('AppController',function($scope){
ons.createPopover('./popover-menu.html').then(function(popover) {
$scope.popmenu = popover;
});
$scope.showMenu = function(e) {
$scope.popmenu.show(e);
};
$scope.hideMenu = function(){
$scope.popmenu.hide();
}
});