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