I tried to use the SideMenu Controller with Ionic 0.9.13-alpha, and (if I haven’t missed anything important) this should work.
index.html
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- ionic css -->
<link rel="stylesheet" href="css/ionic.css" type="text/css">
<!-- ionic/angularjs scripts -->
<script src="js/ionic.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular-animate.js"></script>
<script src="js/angular/angular-cookies.js"></script>
<script src="js/angular/angular-loader.js"></script>
<script src="js/angular/angular-mocks.js"></script>
<script src="js/angular/angular-resource.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="js/angular/angular-sanitize.js"></script>
<script src="js/angular/angular-scenario.js"></script>
<script src="js/angular/angular-touch.js"></script>
<script src="js/ionic-angular.js"></script>
<!-- app scripts -->
<script src="js/app.js"></script>
</head>
<body ng-controller="MenuCtrl">
<side-menus>
<pane side-menu-content>
<header class="bar bar-header bar-balanced">
<button class="button" ng-click="openLeft()">Toggle</button>
<h1 class="title">Test</h1>
</header>
<content has-header="true">
<div class="card">Test of Ionic SideMenu Controller (AngularJS v1.2.2, Ionic v0.9.13-alpha)</div>
</content>
</pane>
<side-menu side="left">
<header class="bar bar-header bar-dark">
<h1 class="title">Side</h1>
</header>
</side-menu>
</side-menus>
</body>
</html>
app.js
angular.module('sideMenuTest', ['ionic']);
.controller('MenuCtrl', function($scope) {
$scope.openLeft = function() {
$scope.sideMenuController.toggleLeft();
};
});
Without the controller, the SideMenu works great, but adding it, I get this error:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.1/$injector/unpr?p0=aProvider%20%3C-%20a
at http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:674
at http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:16399
at Object.c [as get] (http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:15208)
at http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:16494
at c (http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:15208)
at d (http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:15454)
at Object.e [as instantiate] (http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:16096)
at http://uxiedex.altervista.org/_js/ionic-angular.min.js:20:193
at http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:25172
at f (http://uxiedex.altervista.org/_js/ionic-angular.min.js:19:1090) <div class="scroll-content ng-scope ng-isolate-scope has-header" has-header="true">
Do I have missed anything?
Thanks in advance 