teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

修正

2017/04/02 17:14

投稿

seri
seri

スコア422

title CHANGED
File without changes
body CHANGED
@@ -6,4 +6,74 @@
6
6
  ちなみに移動の処理は以下です。
7
7
  ```ここに言語を入力
8
8
  <ons-list-item ng-click="app.load('hoge.html')" tappable>
9
+ ```
10
+
11
+ 補正
12
+ 以下がファイルとなります。この中の <ons-template id="mainhome.html">となっている箇所を別のファイルに移したいのですが、うまくいきません。
13
+ ```ここに言語を入力
14
+ <!DOCTYPE HTML>
15
+ <html ng-app="myApp">
16
+ <head>
17
+ <meta charset="utf-8">
18
+
19
+ <script>
20
+ var app = angular.module('myApp', ['onsen']);
21
+ app.controller('AppController', function($scope) {
22
+ this.load = function(page) {
23
+ $scope.splitter.content.load(page);
24
+ $scope.splitter.left.close();
25
+ };
26
+
27
+ this.toggle = function() {
28
+ $scope.splitter.left.toggle();
29
+ };
30
+ });
31
+
32
+ ons.ready(function() {
33
+ console.log("Onsen UI is ready!");
34
+ });
35
+ </script>
36
+ </head>
37
+
38
+ <body>
39
+
40
+ <ons-splitter ng-controller="AppController as app" var="splitter">
41
+ <ons-splitter-side side="left" width="220px" collapse swipeable>
42
+
43
+ <ons-page>
44
+ <ons-list>
45
+ <ons-list-item ng-click="app.load('mainhome.html')" tappable>
46
+ メインページ
47
+ </ons-list-item>
48
+ <ons-list-item ng-click="app.load('chat.html')" tappable>
49
+ ログイン中
50
+ </ons-list-item>
51
+ <ons-list-item ng-click="app.load('about.html')" tappable>
52
+ About
53
+ </ons-list-item>
54
+ </ons-list>
55
+ </ons-page>
56
+
57
+ </ons-splitter-side>
58
+ <ons-splitter-content page="mainhome.html"></ons-splitter-content>
59
+ </ons-splitter>
60
+
61
+ <ons-template id="mainhome.html">
62
+ <ons-page>
63
+ <ons-toolbar>
64
+ <div class="left">
65
+ <ons-toolbar-button ng-click="app.toggle()">
66
+ <ons-icon icon="md-menu"></ons-icon>
67
+ </ons-toolbar-button>
68
+ </div>
69
+ <div class="center">
70
+ メインページ
71
+ </div>
72
+ </ons-toolbar>
73
+ </ons-page>
74
+ </ons-template>
75
+
76
+
77
+ <ons-template id="chat.html">
78
+ 。。。
9
79
  ```