I have an AngularJS application, where I use directive ion-side-menu along with ion-side-menus from Ionic, v1.0.0-beta.12
HTML DOM
<ion-side-menus>
<ion-side-menu side="left" ng-class="{ 'open': isLeftDesktopSidebarOpen() }">
<ion-content has-header="false">
<div eb-left-menu></div>
</ion-content>
</ion-side-menu>
<!-- -->
<ion-side-menu side="right" ng-class="{'open': isRightDesktopSidebarOpen()}">
<ion-content has-header="false">
<div eb-right-menu></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
JS Script
<div class="eb-ion-side-menus-container">
<ion-side-menus class="eb-ion-side-menus">
<!-- Center content -->
<ion-side-menus>
<ion-side-menu-content edge-drag-threshold="true">
<div class="bar bar-subheader bar-mainsubheader" eb-center-div ng-show="loggedIn">
<button class="button button-icon button-clear ion-navicon pull-left" ng-click="openLeftSidebar();"></button>
<span class="hidden-large-inline">
<button style="line-height: 33px;font-size: 17px;margin-top: -5px !important;width: 154px;background-size: 30px !important;height: 40px;" class="button button-icon button-clear eb-ico logo_small" ng-click="gotoMain()"></button>
</span>
<button class="button button-icon button-clear ion-grid pull-right" ng-click="openRightSidebar();"></button>
</div>
<ion-content class="eb-main-content">
<div ui-view id="main" autoscroll="false" class="animate-on am-fade-and-scale"></div>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
<!-- Left menu -->
<ion-side-menus>
<ion-side-menu side="left" ng-class="{ 'open': isLeftMenuOpen() }">
<div class="bar bar-on-menu bar-subheader bar-mainsubheader" ng-click="toggleLeftSidebar();" ng-show="loggedIn">
<h1 class="title">
<span ng-click="closeLeftSidebar();" style="cursor:pointer; width: 190px;display: inline-block;">Menu</span>
<button style="position: absolute;top: 5px;right: 5px;" class="button button-icon button-clear ion-navicon" ng-click="closeLeftSidebar();"></button>
</h1>
</div>
<ion-content has-header="false">
<div eb-left-menu></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!-- -->
<ion-side-menus>
<ion-side-menu side="right" ng-class="{'open': isRightMenuOpen() }">
<div class="bar bar-on-menu bar-subheader bar-mainsubheader" ng-click="toggleRightSidebar();" ng-show="loggedIn">
<h1 class="title">
<span ng-click="closeRightSidebar();" style="cursor:pointer; width: 190px;display: inline-block;">Moje aplikacje</span>
<button style="position: absolute;top: 5px;left: 5px;" class="button button-icon button-clear ion-grid" ng-click="closeRightSidebar();"></button>
</h1>
</div>
<ion-content has-header="false">
<div eb-right-menu></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
Its purpose is to toggle a side bar, once clicked. And it does work, however it gives me an error in Error: [$compile:ctreq] http://errors.angularjs.org/1.3.0-beta.18/$compile/ctreq?p0=ionSideMenus&p1=ionSideMenu
Description of error says
Controller 'ionSideMenus', required by directive 'ionSideMenu', can't be found!
However it does exist in my vendor file(where I keep all frameworks and libraries)
I would really appreciate some help :D
I think it's also worth mentioning, that the above problem occurs iff I display my page in a desktop view. Otherwise, when emulated via Google Chrome to either Android or Ios it works just fine.
I think you need to wrap ion-side-menu inside of ion-side-menus
so your code will look like this.
<ion-side-menus><ion-side-menu side="left" ng-class="{ 'open': isLeftMenuOpen() }">
<div class="bar bar-on-menu bar-subheader bar-mainsubheader" ng-click="toggleLeftSidebar();" ng-show="loggedIn">
<h1 class="title">
<span ng-click="closeLeftSidebar();" style="cursor:pointer; width: 190px;display: inline-block;">Menu</span>
<button style="position: absolute;top: 5px;right: 5px;" class="button button-icon button-clear ion-navicon" ng-click="closeLeftSidebar();"></button>
</h1>
</div>
<ion-content has-header="false">
<div eb-left-menu></div>
</ion-content>
</ion-side-menu></ion-side-menus>
You can find details here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.