サンプルのOnsen UI TabbarにPage1.htmlは入力フォーム、Page2.htmlは入力した結果を出力する形式になっております。AngularJSでPage1上でテキスト入力させ、Page2にPage1で書いたテキストを表示させることはできましたが、Page1でテキスト入力し送信ボタンを押して、Page2にonsenUIのons-lazy-repeatを使ってテキストリスト追加していく機能を作ろうとしましたがうまく反映できませんでした。AngularJSを触れたのはつい最近なのでわかりませんがご教授願いします。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="components/script.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var app = ons.bootstrap();
app.factory("SharedStateService", function () {
return {
text: 'SharedStateService'
};
});
app.controller("ShareControllerA", function ($scope, SharedStateService) {
$scope.data = SharedStateService;
});
app.controller("ShareControllerB", function ($scope, SharedStateService) {
$scope.data = SharedStateService;
});
app.controller("ShareControllerC", function ($scope, SharedStateService) {
$scope.data = SharedStateService;
});
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="page1.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</body>
</html>
page1.html
<ons-page>
<ons-toolbar>
<div class="center">Navigator</div>
</ons-toolbar>
<h4>Shared State Service</h4>
<div ng-controller="ShareControllerA">
<ons-list-header>This is ShareControllerA</ons-list-header>
<ons-list-item><input type="text" class="text-input" ng-model="data.text" style="80%"></ons-list-item>
</div>
<div style="text-align: center">
<br>
<ons-button ng-click="myNavigator.pushPage('page2.html')">
Add List
</ons-button>
</div>
</ons-page>
page2.html
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<div ng-controller="ShareControllerC">
<h5>This is ShareControllerC</h5>
<ul class="list">
<li class="list__item list__item--tappable">
<label class="radio-button">
<input type="radio" name="r" checked="checked">
<div class="radio-button__checkmark"></div>
{{data.text}}
</label><br>
</li>
</ul>
</div>
</ons-page>