29657


OnsenUIを1系から2.0への移行を検討しています。  
angularJSは1.5を使用しています。

下記のons-tabで設定している各ページにコントローラを適用しています。  
OnsenUI 1系では、それぞれのタブに割り当てられたページを開くと、それに対応するコントローラのJavascriptが実行されていましたが、  
OnsenUI
2.0では、最初のページを開くと、すべてのページのコントローラのJavascriptが実行されているように思われます。(開いていないタブのページのコントローラも実行される)

OnsenUI 2.0でも、各タブを開いたときに、該当するコントローラのJavascriptが実行されるようにしたいのですが、できずに困っています。

解決する方法がありますでしょうか？  
よろしくお願いいたします。

[code]

    <ons-tabbar>
      <ons-tab page="home.html" active="true">HOME</ons-tab>
      <ons-tab page="fav.html">FAV</ons-tab>
      <ons-tab page="settings.html">SETTINGS</ons-tab>
    </ons-tabbar>
    
[/code]


CC BY-SA 3.0
2016-10-03T11:35:30.410
29322
2016-10-18T08:30:55.920
19004
question
onsen-ui angularjs
OnsenUI2.0で、タブ表示(ons-tabbar)した時のAngularJSのコントローラのふるまいについて


`ons-tab`の`page`属性に記述せずに、`ons-
tabbar`の`loadPage()`メソッドを使用してページを読み込ませることで、似たような動作をさせることができます。  
**※下記コードは、monacaの環境で確認した内容です。**

[code]

    <!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 * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            var app = ons.bootstrap("myApp", ["onsen"]);
            app.controller("indexController", ["$scope", function($scope) {
                ons.ready(function() {
                    $scope.loadPage("page1.html");
                });
                $scope.loadPage = function(page) {
                    myTabbar.loadPage(page);
                };
            }]);
            app.controller("page1Controller", ["$scope", function($scope) {
                ons.ready(function() {
            console.log("load page1");
                });
            }]);
            app.controller("page2Controller", ["$scope", function($scope) {
                ons.ready(function() {
            console.log("load page2");
                });
            }]);
            app.controller("page3Controller", ["$scope", function($scope) {
                ons.ready(function() {
            console.log("load page3");
                });
            }]);
        </script>
    </head>
    <body ng-controller="indexController">
        <ons-tabbar var="myTabbar">
            <ons-tab label="Page 1" icon="ion-home" ng-click="loadPage('page1.html')" active="true"></ons-tab>
            <ons-tab label="Page 2" icon="ion-earth" ng-click="loadPage('page2.html')"></ons-tab>
            <ons-tab label="Page 3" icon="ion-android-options" ng-click="loadPage('page3.html')"></ons-tab>
        </ons-tabbar>
    
        <ons-template id="page1.html">
            <ons-page ng-controller="page1Controller">
                <ons-toolbar>
                    <div class="center">Page 1</div>
                </ons-toolbar>
                Page 1
            </ons-page>
        </ons-template>
    
        <ons-template id="page2.html">
            <ons-page ng-controller="page2Controller">
                <ons-toolbar>
                    <div class="center">Page 2</div>
                </ons-toolbar>
                Page 2
            </ons-page>
        </ons-template>
    
        <ons-template id="page3.html">
            <ons-page ng-controller="page3Controller">
                <ons-toolbar>
                    <div class="center">Page 3</div>
                </ons-toolbar>
                Page 3
            </ons-page>
        </ons-template>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-10-18T08:24:47.990
29657
2016-10-18T08:30:55.920
2016-10-18T08:30:55.920
9566
9566
29322
answer