Untitled

<!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>