Splitter Side Menu does not work



  • I’m testing ons-splitter with Onsen UI v2.0.5 and AngularJS v1.6.1 but it does not work.

    I copied and modified this example: https://tutorial.onsen.io/?framework=angular1&category=Reference&module=splitter (This example does not work)

    When I click on the menu item this error is displayed:
    Can not read property ‘load’ of undefined

    <!doctype html>
    <html lang="en" ng-app="my-app">
    <head>
        <title>App</title>
        <meta charset="utf-8">
    
        <!-- CSS -->
        <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/>
        <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/>
    
    </head>
    <body>
        <ons-navigator var="navegador">
            <div ng-controller="MainController"></div>
        </ons-navigator>
    
        <ons-template id="principal.html">
            <ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
              <ons-splitter-side side="left" width="220px" collapse swipeable>
                <ons-page>
                  <ons-list>
                    <ons-list-item ng-click="splitter.load('home.html')" tappable>
                      Home
                    </ons-list-item>
                  </ons-list>
                </ons-page>
              </ons-splitter-side>
              <ons-splitter-content page="home.html"></ons-splitter-content>
            </ons-splitter>
        </ons-template>
    
        <ons-template id="home.html">
          <ons-page>
            <ons-toolbar>
              <div class="left">
                <ons-toolbar-button ng-click="mySplitter.left.open()">
                  <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
              </div>
              <div class="center">
                Main
              </div>
            </ons-toolbar>
            <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
              Swipe right to open the menu!
            </p>
          </ons-page>
        </ons-template>
    
        <!-- JS -->
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="node_modules/onsenui/js/onsenui.js"></script>
        <script src="node_modules/onsenui/js/angular-onsenui.js"></script>
    
        <script type="text/javascript">
            var app = angular.module('my-app', ['onsen']);
    
            app.controller('MainController',function($scope){
                $scope.navegador.pushPage('principal.html');
            });
    
            app.controller('SplitterController', function() {
    
                this.load = function(page) {
                  mySplitter.content.load(page).then(function() {
                      mySplitter.left.close();
                    });
                };
              });
        </script>
    
    </body>
    </html>
    

    Console:
    0_1485536944508_Screen Shot 2017-01-27 at 18.08.44.png

    Thank you!



  • I found the solution.

    Add the id attribute to <ons-splitter-content>:

    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    

    Make changes to the SplitterController:

    app.controller('SplitterController', function() {
    
                this.load = function(page) {
                  //mySplitter.content.load(page).then(function() {
                  content.load(page).then(function() {
                      mySplitter.left.close();
                    });
                };
              });
    

    This works. Is it the right solution?


  • Onsen UI

    @anderson Hi! There was a bug with the load method wrapper in AngularJS. It was fixed a couple weeks ago but wasn’t released yet. For now you can use what you just said :)


Log in to reply