16425


AngularJS×OnsenUIで開発を行っています。  
OnsenUIのpopover内にng-clickをセットしても、イベントとして検知されません。  
（[Plunker](http://plnkr.co/edit/u51GvOcAyUHeq5pSttIa?p=preview)にソースを置いています）  
解決方法はありますでしょうか？

どなたかわかる方いらっしゃいましたら、ご教示いただけると幸いです。  
plunkerにソースがあります。

何卒、よろしくお願い申し上げます。

\---------- HTML(index) ----------

[code]

    <!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>
    
[/code]

\---------- HTML(popoverに表示する内容) ----------

[code]

    <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>    
    
[/code]

\---------- Javascript ----------

[code]

    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();
      }
    
    });
    
[/code]


CC BY-SA 3.0
2015-09-09T04:13:10.360
16417
2015-09-09T06:39:43.500
12198
question
onsen-ui angularjs
OnsenUIのpopover内でng-clickが効かない？

[code]

    <ons-page ng-controller="AppController" class="page">
    
[/code]

と

[code]

    <ons-template id="popover_menu">
      <div ng-controller="AppController">
    
[/code]

で`ng-controller`の名前が重複しています。  
また、`<ons-popover>`は新しいスコープを作るようなので2つ目の`ng-controller`は`<ons-
popover>`に付けた方が良さそうです。

上記を踏まえてとりあえず動くサンプルを作成しました。  
ただ、このサンプルだと

[code]

    $scope.hideMenu = function() {
      $scope.$parent.$$childHead.popover.hide();
    }
    
[/code]

の辺りが強引なので、やり方を検討する余地があるかと思います。  
[こちらの回答](https://ja.stackoverflow.com/questions/9134/ons-
popover%E5%88%A9%E7%94%A8%E6%99%82%E3%81%AEjavascript%E3%81%AE%E5%A4%89%E6%95%B0%E3%81%AE%E5%80%A4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/9144#9144)に記載しているようにポップオーバーを外出しするのも一案かもしれません。

[code]

    var module = ons.bootstrap();
    module.controller('AppController', function($scope) {
      ons.createPopover('popover.html').then(function(popover) {
        $scope.popover = popover;
      });
    
      $scope.showMenu = function(e) {
        $scope.popover.show(e);
      };
    });
    module.controller('PopupController', function($scope) {
      $scope.hideMenu = function() {
        // ここは強引なのでやり方を変えた方が良さそう
        $scope.$parent.$$childHead.popover.hide();
      }
    });
[/code]

[code]

    .pop-menu-item-col {
      text-align: center;
      padding: 12px 0 12px 0;
    }
    
    .pop-menu-item-col:not(:first-child) {
      border-left: 1px solid #eee;
    }
    
    .pop-menu-item-col:active {
      background-color: #eee;
    }
    
    .pop-menu-item-label {
      font-size: 11px;
      color: #333;
      margin-top: 3px;
    }
    
    .pop-menu-item-icon {
      color: #999;
      font-size: 38px;
    }
    
    .popover__content {
      min-height: 0;
    }
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
    
    <ons-page ng-controller="AppController">
      <ons-toolbar>
        <div class="center">Popover</div>
      </ons-toolbar>
      <div style="text-align: center">
        <br />
        <br />
        <ons-button id="button" ng-click="showMenu('#button')">Click me!</ons-button>
      </div> 
    </ons-page>
    
    <ons-template id="popover.html">
      <ons-popover cancelable style="width: 95%; max-width: 300px;" direction="down" ng-controller="PopupController">
        <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>
    </ons-template>
    
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
[/code]


CC BY-SA 3.0
2015-09-09T06:39:43.500
16425
2015-09-09T06:39:43.500
2017-04-13T12:52:39.113
-1
3516
16417
answer