Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
- <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>
- <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>
- <!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 () {
- var array = [];
- return {
- items: array,
- append: function(s){
- array.push(s);
- }
- }
- });
- app.controller("ShareControllerA", function ($scope, SharedStateService) {
- $scope.add = function(){
- SharedStateService.append($scope.data.text);
- tabbar.setActiveTab(1);
- }
- });
- app.controller("ShareControllerC", function ($scope, SharedStateService) {
- // ons-lazy-repeatのためのデリゲート
- // http://ja.onsen.io/guide/overview.html#UsingLazyRepeat
- $scope.MyDelegate = {
- countItems: function() {
- // Return number of items.
- return SharedStateService.items.length;
- },
- calculateItemHeight: function(index) {
- // Return the height of an item in pixels.
- return 45;
- },
- configureItemScope: function(index, itemScope) {
- // Initialize scope
- itemScope.item = SharedStateService.items[index];
- },
- destroyItemScope: function(index, itemScope) {
- // Optional method that is called when an item is unloaded.
- console.log('Destroyed item with index: ' + index);
- }
- };
- });
- </script>
- </head>
- <body>
- <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>
- <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 style="text-align: center">
- <br>
- <ons-button ng-click="add()">
- Add List
- </ons-button>
- </div>
- </div>
- </ons-page>
- <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" ons-lazy-repeat="MyDelegate">
- <li class="list__item list__item--tappable">
- <label class="radio-button">
- <input type="radio" name="r" checked="checked">
- <div class="radio-button__checkmark"></div>
- {{item}}
- </label><br>
- </li>
- </ul>
- </div>
- </ons-page>
Add Comment
Please, Sign In to add comment