splitterContent error when use ons-splitter-content with tabbar



  • I follow this link: https://onsen.io/blog/auto-style-app-onsen/ to make a Todo App.
    Here my 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>
      <script src="lib/angular/angular.min.js"></script>
      <script src="lib/onsenui/js/onsenui.min.js"></script>
      <script src="lib/onsenui/js/angular-onsenui.js"></script>
      <script src="js/app.js"></script>
      <script src="js/services.js"></script>
      <script src="js/controllers.js"></script>
    
      <link rel="stylesheet" href="components/loader.css">
      <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
      <link rel="stylesheet" href="css/style.css">
    
    </head>
    <body>
      <!-- First navigation component: Navigator. This will remain always on top of the app. -->
      <ons-navigator id="myNavigator" page="splitter.html">
      </ons-navigator>
    
    
      <!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
      <ons-template id="splitter.html">
        <ons-splitter id="mySplitter">
          <ons-splitter-side page="html/menu.html" swipeable width="250px" collapse swipe-target-width="50px">
          </ons-splitter-side>
          <ons-splitter-content page="tabbar.html">
          </ons-splitter-content>
        </ons-splitter>
      </ons-template>
    
      <!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
      <ons-template id="tabbar.html">
          <ons-page id="tabbarPage">
            <ons-toolbar>
              <div class="left">
                <!-- Toolbar-button with different icons depending on the platform. -->
                <ons-toolbar-button component="button/menu">
                  <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                </ons-toolbar-button>
              </div>
              <div class="center">To-Do List App 2.0</div>
              <div class="right">
                <!-- Toolbar-button  only visible for iOS/other. -->
                <ons-if platform="ios other">
                  <ons-toolbar-button component="button/new-task">New</ons-toolbar-button>
                </ons-if>
              </div>
            </ons-toolbar>
    
            <!-- Floating Action Button only visible for Android. -->
            <ons-if platform="android">
              <ons-fab position="right bottom" component="button/new-task">
                <ons-icon icon="md-edit"></ons-icon>
              </ons-fab>
            </ons-if>
    
            <!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
            <ons-tabbar id="myTabbar" position="auto">
              <ons-tab page="html/pending_tasks.html" label="Pending" active>
              </ons-tab>
              <ons-tab page="html/completed_tasks.html" label="Completed">
              </ons-tab>
            </ons-tabbar>
          </ons-page>
      </ons-template>
    </body>
    </html>
    

    And app.js:

    ons.bootstrap()
          .controller('AppController', function() {
          });
    ons.ready(function() {
        console.log("Onsen UI is ready!");
    });
    
    

    But when i run then error:
    0_1482844692089_error1.png
    and show detail:
    0_1482844862043_error2.png

    Version: /*! angular-onsenui.js for onsenui - v2.0.3 - 2016-10-26 */


Log in to reply