Splitter Side Menu does not work

anderson

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!

anderson

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?

Fran Diox

@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 :)

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Splitter Side Menu does not work