1

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

});

1 件の回答 1

0
<ons-page ng-controller="AppController" class="page">

<ons-template id="popover_menu">
  <div ng-controller="AppController">

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

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

$scope.hideMenu = function() {
  $scope.$parent.$$childHead.popover.hide();
}

の辺りが強引なので、やり方を検討する余地があるかと思います。
こちらの回答に記載しているようにポップオーバーを外出しするのも一案かもしれません。

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

2
  • @ita_3y ご回答ありがとうございます。 ons-popoverは新しいスコープを作るのですね。なので、親スコープのコントローラーを見に行くために$scope.$parentしている、という事でしょうか。 また、親スコープとの依存を無くすためにpopoverを別途作成した方が独立性が保てる、ということでしょうか。 現在directiveやscopeに対しての理解が足りておらず、稚拙な質問ですが、私の認識は合ってますでしょうか?? Commented 2015年9月9日 8:15
  • @y.yamaguchi 概ね合っていると思います。細かい話をすると$scope.$parentはAppControllerが持っているpopoverを操作するために辿っています(サンプルの場合だとAppControllerは$parentの$$childHead, PopupControllerは$$childTailにいたので、親を経由して別の子を見ている感じです)。ちなみに「$scope.$$prevSibling.popover」でも動きました。自分もあまり詳しくないので、もっとスマートなやり方があるかもしれません。
    – ita_3y
    Commented 2015年9月9日 8:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。