ダイヤログのツールバーにクリックされたボタンのラベルを表示したい。

初めて質問させていただきます。

今、monacaのonsenuiとAngularJSを使ってアプリを開発しています。

home.htmlにあるbutton1をクリックするとbutton.htmlがダイヤログで表示されるよなアプリを作成しています。

ここで2つ問題が起きました。

まずはソースを見てください。

home.html

html
1  <ons-template id="home.html">
2    <ons-page>
3      <ons-toolbar>
4        <div class="left">
5          <ons-toolbar-button ng-click="app.toggle()">
6            <ons-icon icon="md-menu"></ons-icon>
7          </ons-toolbar-button>
8        </div>
9        <div class="center">
10          Main
11        </div>
12      </ons-toolbar>
13      <div ng-controller="DialogController as dlgc">
14        <ons-button ng-click="dlgc.show('button.html')" id="btn1">button1</ons-button>
15      </div>
16    </ons-page>
17  </ons-template>

button.html

html
1<ons-template id="button.html">
2  <ons-dialog var="dialog" modifier="material" cancelable>
3    <div class="dialog-container" style="height: 200px;">
4      <ons-page>
5        <ons-toolbar>
6          <div class="center">
7            <div ng-controller="DialogController as dlgc" ng-cloak>
8              <span ng-bind="dlgc.button"></span>
9            </div>
10          </div>
11        </ons-toolbar>
12        <ons-list ng-controller="listController as lstc">
13          <ons-list-item ng-click="lstc.output('1')" modifier="tappable">
14            リストを押した
15          </ons-list-item>
16        </ons-list>
17      </ons-page>
18    </div>
19  </ons-dialog>

javascript.js

javascript
1  ons.bootstrap()
2    //ダイアログを開く処理
3      .controller('DialogController', function($scope) {
4        this.button="button";
5        this.show = function(dlg) {
6          ons.createDialog(dlg).then(function(dialog) {
7            dialog.show();
8          });
9        }
10      })
11    //リストを選んだときの処理
12      .controller('listController', function($scope) {
13        this.output = function(key){
14          dialog.hide();
15          keyword=key;
16          console.log(keyword);
17        }
18      });

前提・実現したいこと

2つあります。
- javascript.jsにあるthis.button="button";の"button"のところをindex.htmlでクリックされたボタンのラベルを表示したい。

button.htmlにある<span ng-bind="dlgc.button"></span>に上のラベルを表示したい。

発生している問題・エラーメッセージ

1つめの問題については全くどうすればいいのかわかりません。
2つめの問題は、現状では<ons-list-item ng-click="lstc.output('1')" modifier="tappable">リストを押した</ons-list-item>をクリックすると一瞬だけbuttonと表示されダイアログが消えてしまいます。

どうかご回答の程よろしくお願いいたします。

index.htmlが必要とのことなので載せておきます。よろしくお願いいたします。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    ons.bootstrap()
19    //左上のページを変える処理
20     .controller('AppController', function($scope) {
21        this.load = function(page) {
22          $scope.splitter.content.load(page);
23          $scope.splitter.left.close();
24        };
25        this.toggle = function() {
26          $scope.splitter.left.toggle();
27        };
28      })
29    //ダイアログを開く処理
30      .controller('DialogController', function($scope) {
31        this.button="button";
32        this.show = function(dlg) {
33          ons.createDialog(dlg).then(function(dialog) {
34            dialog.show();
35          });
36        }
37      })
38    //リストを選んだときの処理
39      .controller('listController', function($scope) {
40        this.output = function(key){
41          dialog.hide();
42          keyword=key;
43          console.log(keyword);
44        }
45      });
46    ons.ready(function() {
47        console.log("Onsen UI is ready!");
48    });
49  </script>
50</head>
51<body>
52
53  <ons-splitter ng-controller="AppController as app" var="splitter">
54    <ons-splitter-side side="left" width="220px" collapse swipeable>
55      <ons-page>
56        <ons-list>
57          <ons-list-item ng-click="app.load('home.html')" tappable>
58            Home
59          </ons-list-item>
60          <ons-list-item ng-click="app.load('settings.html')" tappable>
61            Settings
62          </ons-list-item>
63          <ons-list-item ng-click="app.load('about.html')" tappable>
64            About
65          </ons-list-item>
66        </ons-list>
67      </ons-page>
68    </ons-splitter-side>
69    <ons-splitter-content page="home.html"></ons-splitter-content>
70  </ons-splitter>
71
72    <ons-template id="home.html">
73    <ons-page>
74      <ons-toolbar>
75        <div class="left">
76          <ons-toolbar-button ng-click="app.toggle()">
77            <ons-icon icon="md-menu"></ons-icon>
78          </ons-toolbar-button>
79        </div>
80        <div class="center">
81          Main
82        </div>
83      </ons-toolbar>
84      <div ng-controller="DialogController as dlgc">
85        <ons-button ng-click="dlgc.show('button.html')" id="btn1">button1</ons-button>
86      </div>
87    </ons-page>
88  </ons-template>
89
90  <ons-template id="settings.html">
91    <ons-page>
92      <ons-toolbar>
93        <div class="left">
94          <ons-toolbar-button ng-click="app.toggle()">
95            <ons-icon icon="md-menu"></ons-icon>
96          </ons-toolbar-button>
97        </div>
98        <div class="center">
99          Settings
100        </div>
101      </ons-toolbar>
102    </ons-page>
103  </ons-template>
104
105  <ons-template id="about.html">
106    <ons-page>
107      <ons-toolbar>
108        <div class="left">
109          <ons-toolbar-button ng-click="app.toggle()">
110            <ons-icon icon="md-menu"></ons-icon>
111          </ons-toolbar-button>
112        </div>
113        <div class="center">
114          About
115        </div>
116      </ons-toolbar>
117    </ons-page>
118  </ons-template>
119  
120<ons-template id="button.html">
121  <ons-dialog var="dialog" modifier="material" cancelable>
122    <div class="dialog-container" style="height: 200px;">
123      <ons-page>
124        <ons-toolbar>
125          <div class="center">
126            <div ng-controller="DialogController as dlgc" ng-cloak>
127              <span ng-bind="dlgc.button"></span>
128            </div>
129          </div>
130        </ons-toolbar>
131        <ons-list ng-controller="listController as lstc">
132          <ons-list-item ng-click="lstc.output('1')" modifier="tappable">
133            リストを押した
134          </ons-list-item>
135        </ons-list>
136      </ons-page>
137    </div>
138  </ons-dialog>
139</body>
140</html>

rururu3

2018/11/19 14:39

index.htmlが無いのでどういう動作かわからないので載せていただければ

Drthomas

2018/11/19 15:31

早速の連絡ありがとうございます。index.htmlを載せておきましたのでよろしくお願いいたします。

行動規範の内容に同意します

回答2件

AngularJS詳しくないのでちょっと強引にやってますが

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    var label = '';
19    var _appScope = null;
20    ons.bootstrap()
21      //左上のページを変える処理
22     .controller('AppController', function($scope) {
23       _appScope = $scope;
24        this.load = function(page) {
25          $scope.splitter.content.load(page);
26          $scope.splitter.left.close();
27        };
28        this.toggle = function() {
29          $scope.splitter.left.toggle();
30        };
31      })
32      //ダイアログを開く処理
33      .controller('DialogController2', function($scope) {
34        $scope.$on('eventname', function(event, args) {
35          $scope.dlgc2.button = args;
36          $scope.$apply();
37        });
38      })
39      //ダイアログを開く処理
40      .controller('DialogController', function($scope) {
41        this.show = function(dlg) {
42          ons.createDialog(dlg).then(function(dialog) {
43            dialog.show()
44            .then(function(a) {
45              // 強引にやってるので
46              _appScope.$parent.$broadcast('eventname', 'aaa');
47            });
48          });
49        }
50      })
51      //リストを選んだときの処理
52      .controller('listController', function($scope) {
53        this.output = function(key){
54          dialog.hide();
55          keyword=key;
56          console.log(keyword);
57        }
58      });
59    ons.ready(function() {
60        console.log("Onsen UI is ready!");
61    });
62  </script>
63</head>
64<body>
65
66  <ons-splitter ng-controller="AppController as app" var="splitter">
67    <ons-splitter-side side="left" width="220px" collapse swipeable>
68      <ons-page>
69        <ons-list>
70          <ons-list-item ng-click="app.load('home.html')" tappable>
71            Home
72          </ons-list-item>
73          <ons-list-item ng-click="app.load('settings.html')" tappable>
74            Settings
75          </ons-list-item>
76          <ons-list-item ng-click="app.load('about.html')" tappable>
77            About
78          </ons-list-item>
79        </ons-list>
80      </ons-page>
81    </ons-splitter-side>
82    <ons-splitter-content page="home.html"></ons-splitter-content>
83  </ons-splitter>
84  <ons-template id="home.html">
85    <ons-page>
86      <ons-toolbar>
87        <div class="left">
88          <ons-toolbar-button ng-click="app.toggle()">
89            <ons-icon icon="md-menu"></ons-icon>
90          </ons-toolbar-button>
91        </div>
92        <div class="center">
93          Main
94        </div>
95      </ons-toolbar>
96      <div ng-controller="DialogController as dlgc">
97        <ons-button ng-click="dlgc.show('button.html')" id="btn1">button1</ons-button>
98      </div>
99    </ons-page>
100  </ons-template>
101
102  <ons-template id="settings.html">
103    <ons-page>
104      <ons-toolbar>
105        <div class="left">
106          <ons-toolbar-button ng-click="app.toggle()">
107            <ons-icon icon="md-menu"></ons-icon>
108          </ons-toolbar-button>
109        </div>
110        <div class="center">
111          Settings
112        </div>
113      </ons-toolbar>
114    </ons-page>
115  </ons-template>
116
117  <ons-template id="about.html">
118    <ons-page>
119      <ons-toolbar>
120        <div class="left">
121          <ons-toolbar-button ng-click="app.toggle()">
122            <ons-icon icon="md-menu"></ons-icon>
123          </ons-toolbar-button>
124        </div>
125        <div class="center">
126          About
127        </div>
128      </ons-toolbar>
129    </ons-page>
130  </ons-template>
131
132  <ons-template id="button.html">
133    <ons-dialog var="dialog" modifier="material" cancelable>
134      <div class="dialog-container" style="height: 200px;">
135        <ons-page>
136          <ons-toolbar>
137            <div class="center">
138              <div ng-controller="DialogController2 as dlgc2" ng-cloak>
139                <span ng-bind="dlgc2.button"></span>
140              </div>
141            </div>
142          </ons-toolbar>
143          <ons-list ng-controller="listController as lstc">
144            <ons-list-item ng-click="lstc.output('1')" modifier="tappable">
145              リストを押した
146            </ons-list-item>
147          </ons-list>
148        </ons-page>
149      </div>
150    </ons-dialog>
151  </ons-template>
152</body>
153</html>

投稿2018/11/20 03:36

rururu3

総合スコア5545

自己解決

1つめの解決方法を見つけました。

rururu3さんのソースに少し手を加えます。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    var label = '';
19    var _appScope = null;
20    ons.bootstrap()
21     .controller('AppController', function($scope) {
22       _appScope = $scope;
23        this.load = function(page) {
24          $scope.splitter.content.load(page);
25          $scope.splitter.left.close();
26        };
27        this.toggle = function() {
28          $scope.splitter.left.toggle();
29        };
30      })
31      .controller('DialogController2', function($scope) {
32        $scope.$on('eventname', function(event, args) {
33          $scope.dlgc2.button = args;
34          $scope.$apply();
35        });
36      })
37      .controller('DialogController', function($scope) {
38        this.show = function(dlg) {
39          ons.createDialog("button.html").then(function(dialog) {
40            dialog.show()
41            .then(function(a) {
42              // 押されたボタンのidを取得しinnerHTMLでラベルを読み込む
43              _appScope.$parent.$broadcast('eventname', document.getElementById(dlg.target.id).innerHTML);
44            });
45          });
46        }
47      })
48      .controller('listController', function($scope) {
49        this.output = function(key){
50          dialog.hide();
51          keyword=key;
52          console.log(keyword);
53        }
54      });
55    ons.ready(function() {
56        console.log("Onsen UI is ready!");
57    });
58  </script>
59</head>
60<body>
61
62  <ons-splitter ng-controller="AppController as app" var="splitter">
63    <ons-splitter-side side="left" width="220px" collapse swipeable>
64      <ons-page>
65        <ons-list>
66          <ons-list-item ng-click="app.load('home.html')" tappable>
67            Home
68          </ons-list-item>
69          <ons-list-item ng-click="app.load('settings.html')" tappable>
70            Settings
71          </ons-list-item>
72          <ons-list-item ng-click="app.load('about.html')" tappable>
73            About
74          </ons-list-item>
75        </ons-list>
76      </ons-page>
77    </ons-splitter-side>
78    <ons-splitter-content page="home.html"></ons-splitter-content>
79  </ons-splitter>
80  <ons-template id="home.html">
81    <ons-page>
82      <ons-toolbar>
83        <div class="left">
84          <ons-toolbar-button ng-click="app.toggle()">
85            <ons-icon icon="md-menu"></ons-icon>
86          </ons-toolbar-button>
87        </div>
88        <div class="center">
89          Main
90        </div>
91      </ons-toolbar>
92      <div ng-controller="DialogController as dlgc">
93<!--ここのdlgc.show(”button.html”)をdlgc.show($event)にかえる-->
94        <ons-button ng-click="dlgc.show($event)" id="btn1">button1</ons-button>
95      </div>
96    </ons-page>
97  </ons-template>
98
99  <ons-template id="settings.html">
100    <ons-page>
101      <ons-toolbar>
102        <div class="left">
103          <ons-toolbar-button ng-click="app.toggle()">
104            <ons-icon icon="md-menu"></ons-icon>
105          </ons-toolbar-button>
106        </div>
107        <div class="center">
108          Settings
109        </div>
110      </ons-toolbar>
111    </ons-page>
112  </ons-template>
113
114  <ons-template id="about.html">
115    <ons-page>
116      <ons-toolbar>
117        <div class="left">
118          <ons-toolbar-button ng-click="app.toggle()">
119            <ons-icon icon="md-menu"></ons-icon>
120          </ons-toolbar-button>
121        </div>
122        <div class="center">
123          About
124        </div>
125      </ons-toolbar>
126    </ons-page>
127  </ons-template>
128
129  <ons-template id="button.html">
130    <ons-dialog var="dialog" modifier="material" cancelable>
131      <div class="dialog-container" style="height: 200px;">
132        <ons-page>
133          <ons-toolbar>
134            <div class="center">
135              <div ng-controller="DialogController2 as dlgc2" ng-cloak>
136                <span ng-bind="dlgc2.button"></span>
137              </div>
138            </div>
139          </ons-toolbar>
140          <ons-list ng-controller="listController as lstc">
141            <ons-list-item ng-click="lstc.output('1')" modifier="tappable">
142              リストを押した
143            </ons-list-item>
144          </ons-list>
145        </ons-page>
146      </div>
147    </ons-dialog>
148  </ons-template>
149</body>
150</html>