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