I am using the Semantic-UI with AngularJS and I have a problem with semantic-ui menu.
In the index.html file I define the main menu:
<div class="ui inverted tiered menu">
<a class="active item" href="#/login">
<i class="sign in icon"></i> Login
</a>
<div class="ui dropdown item">
<i class="users icon"></i> TEST <i class="icon dropdown"></i>
<div class="menu">
<a class="item" href="#/test/test1"><i class="add icon"></i>Dodaj</a>
</div>
</div>
</div>
...
<div ng-view></div>
In app.js I have:
hrmApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: '/login.html',
controller: 'LoginController'
}).
when('/comment', {
templateUrl: '/test.html',
controller: 'TestController'
}).
otherwise({
redirectTo:'/login'
});
}]);
When I navigate to the site using /test/test1 then the dropdown menu works however when I navigate to the site using /login and then reload page (ctrl+r) then the dropdown menu doesnt work. What may be the cause of this problem?
I solved the problem. I have multiple controllers and ui.dropdown was initalized only in one of them using code presented below:
$('.ui.dropdown').dropdown();
Adding this code in other controllers solved it.
Related
I used to have the attached code working just fine, but then an update caused it to stop working. I was not able to make the adjustments so hopefully someone here has gone through it. The last block after the HTML is just smarty code to include the js file. The URL I am getting is: mySite.com/policies#!/#refund
which does not load anything. If I manually delete the second # to make it /policies#!/refund it does work.
This is the js file:
var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'dialogs.main',
'summernote', 'angular-loading-bar', 'ngAnimate', 'fiestah.money', 'ui.ace',
'ui.select', 'ngCart']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/templates/main-app/policy/policy-reviews.tpl',
controller: 'mainCtrl'
})
.when('/reviews', {
templateUrl: '/templates/main-app/policy/policy-reviews.tpl',
controller: 'mainCtrl'
})
.when('/currency', {
templateUrl: '/templates/main-app/policy/policy-currency.tpl',
controller: 'mainCtrl'
})
.when('/refund', {
templateUrl: '/templates/main-app/policy/policy-refund.tpl',
controller: 'mainCtrl'
});
});
app.controller('mainCtrl', function ($scope, $rootScope, $filter, $http, $location, dialogs) {
console.log("in ctrl");
});
This is the template:
<div ng-controller="mainCtrl">
<div class="act-dash">
<nav class="navbar-default content-header blue" role="navigation" style="position:relative;">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div id="admin-collapse" class="pad-left-fix" style="bottom:0px;">
<div class="container"><h1>Terms and Policies</h1></div>
<ul class="nav navbar-nav" style="position:relative; bottom:0px">
<li><span class="glyphicon glyphicon-eye-open"> </span>Comments and Reviews</li>
<li><span class="glyphicon glyphicon-usd"> </span>Currency Conversion</li>
<li><span class="glyphicon glyphicon-usd"> </span>Refund Policy</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="content narrow-content margin-fix">
<div class="row margin-fix margin-bottom-fix div-table" style="width:100%;">
<div class="col-md-12 pad-left-fix pad-right-fix div-table-cell">
<div style="text-align: left;">
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{assign var="extra_js" scope="global" value="
<script type=\"text/javascript\" src=\"/js/angular-apps/policy.js\">
</script>
"}
You can Add Following line of code in your app.config, Just below
$routeProvider and see if it will work. Before run Please clear cache
and coockies on your browser.
$locationProvider.hashPrefix('');
I page web aplication with index.html file where is my login page. after succes log in I want to load page with routeProvider where i am using charts to draw diagrams . I have Error when i am loading just index.html for logg in not even this page where i am using charts.
my error looks like
Error: Please set height and width for the chart element
i#http://localhost:8080/pos/js/angular-charts.min.js:1:12049
Y/<#http://localhost:8080/pos/js/angular.min.js:70:91
Z#http://localhost:8080/pos/js/angular.min.js:70:149
A#http://localhost:8080/pos/js/angular.min.js:59:203
g#http://localhost:8080/pos/js/angular.min.js:51:299
g#http://localhost:8080/pos/js/angular.min.js:51:316
g#http://localhost:8080/pos/js/angular.min.js:51:316
g#http://localhost:8080/pos/js/angular.min.js:51:316
F/<#http://localhost:8080/pos/js/angular.min.js:50:415
ngViewFillContentFactory/<.link#http://localhost:8080/pos/js/angular-route.js:983:7
Z#http://localhost:8080/pos/js/angular.min.js:70:149
A#http://localhost:8080/pos/js/angular.min.js:59:203
g#http://localhost:8080/pos/js/angular.min.js:51:299
F/<#http://localhost:8080/pos/js/angular.min.js:50:415
I/<#http://localhost:8080/pos/js/angular.min.js:52:283
l#http://localhost:8080/pos/js/angular.min.js:56:293
update#http://localhost:8080/pos/js/angular-route.js:933:25
Pe/this.$get</l.prototype.$broadcast#http://localhost:8080/pos/js/angular.min.js:128:120
commitRoute/<#http://localhost:8080/pos/js/angular-route.js:616:15
f/<#http://localhost:8080/pos/js/angular.min.js:112:20
Pe/this.$get</l.prototype.$eval#http://localhost:8080/pos/js/angular.min.js:125:301
Pe/this.$get</l.prototype.$digest#http://localhost:8080/pos/js/angular.min.js:122:390
Pe/this.$get</l.prototype.$apply#http://localhost:8080/pos/js/angular.min.js:126:56
l#http://localhost:8080/pos/js/angular.min.js:81:169
S#http://localhost:8080/pos/js/angular.min.js:85:301
vf/</D.onload#http://localhost:8080/pos/js/angular.min.js:86:315
<div data-ac-chart="'pie'" data-ac-data="cityData" data-ac-config="cityConf" class="chart ng-isolate-scope" id="chart">
here is my html file where i have charts
<div class="row-fluid maginTopDiv">
<div class="span4">
<h2>City</h2>
<div
data-ac-chart="'pie'"
data-ac-data="cityData"
data-ac-config="cityConf"
class="chart" id="chart">
</div>
</div>
<div class="span4">
<h2>Type</h2>
<div
data-ac-chart="'pie'"
data-ac-data="termTypeData"
data-ac-config="termTypeConf"
class="chart" id="chart">
</div>
</div>
<div class="span4">
<h2>Program ID</h2>
<div
data-ac-chart="'pie'"
data-ac-data="programIdData"
data-ac-config="programIdConf"
class="chart" id="chart">
</div>
</div>
</div>
here is my css content for this divs
.chart{
width: 100%;
height: 200px;
}
my config for routing
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.htm',
controller: 'mainController'
})
.when('/dashboard', {
templateUrl: 'home.htm',
controller: 'mainController'
})
.when('/archive',{
templateUrl: 'problemArchive.htm',
controller: 'mainController'
})
.otherwise({
templateUrl: 'home.htm',
controller: 'mainController'
});
});
and in controller i am defining data for this charts after successuly logg in and after login i am getting data on the page except this charts.
why i have this errors when i even not loading this page i just have index.html page where i am not using charts, just after log in
i have a problem, that i want to make my component could add new sidebar menu item each item user clickin an add button. so basically my component should appear when user defining their own sidebar menu item.
here's the vue js code i've write:
Vue.component('sb-menu-item', {
props: ['attrib'],
template: '<a class="item"><i class="{{attrib.icon}} icon"></i>{{attrib.name}}</a>'
});
new Vue({
el: '#sb-list',
data: {
itemsProp: [{icon: 'calendar icon', name: 'history'}],
newItems: [{icon: '', name: ''}]
},
methods: {
addItem: function (){
this.itemsProp.push({icon: this.newItems.icon, name: this.newItems.name});
// this.itemsProp.name.push(this.attrib.name);
this.newItems = [];
},
delItem: function (){
this.itemsProp.pop();
}
}
});
<div class="ui top attached menu">
<a class="item">
<i class="sidebar icon"></i>
<i class="right chevron icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable" id="sb-list">
<div class="ui visible left vertical sidebar menu" >
<a class="item">
<i class="home icon"></i>
Dashboard
</a>
<a class="item">
<i class="user icon"></i>
Account
</a>
<sb-menu-item v-for="item in itemsProp" v-bind:attrib="item" v-model="itemsProp"></sb-menu-item>
</div>
<div class="pusher">
<div class="ui basic teal segment">
<h3 class="ui header">Insert New Sidebar Items</h3>
<hr />
<form class="ui tiny teal form compact raised padded segment">
<div class="field">
<input type="text" placeholder="Item Name" v-model="newItems.name">
</div>
<div class="field">
<input type="text" placeholder="icon name" v-model="newItems.icon">
</div>
<button class="ui medium teal float button" v-on:click="addItem"><i class="cubes icon"></i> Make It!</button>
<button class="ui medium red float button" v-on:click="delItem"><i class="trash icon"></i>Pop Last Menu! Now!</button>
</form>
<p></p>
<div class="ui medium teal raised padded segment">{{$data | json}}</div>
</div>
</div>
</div>
this codes work, but each time i click the add button it has been added their own sidebar menu item that i've defined from the forms, and in a seconds those item disappear. (i am using semanticUI though)
sorry for my bad english and explanation. i hope u can understand this, thanks!
I see 2 potential issues. I will try to add a jsFiddle later maybe.
First of all I would make the newItem and object instead of an array.
Second issue is the v-model in the sb-menu-item component. Since you already send the item via attrib prop, you don't need the v-model there.
Here is a fiddle with a simple example of adding/removing stuff based on inputs.
https://jsfiddle.net/z11fe07p/437/
Also note that in case you refresh the page, all the data will be lost because vue is not meant for persiting data.
I'm new on bulma css http://bulma.io/
I'm trying to use hamburger menu for mobile user.
I just followed instruction on this page: http://bulma.io/documentation/components/nav/
But it doesn't work. What should I add ?
Actually, I can see hamburger menu, but it doesn't work when I am click it.
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>test</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section class="hero is-fullheight is-primary is-bold">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item" href="/">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="/about">
About
</a>
<a class="nav-item" href="/path">
Path
</a>
<a class="nav-item" href="/blog">
Blog
</a>
</div>
</div>
</header>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
</div>
</div>
</section>
</body>
</html>
This solution uses Vue.js to toggle the bulma nav component when viewing on mobile. I hope this helps others that are looking for an alternative solution.
JS
First, I add the cdn for Vue.js which can be found here https://unpkg.com/vue, and include an instance of Vue in the javascript.
new Vue({
el: '#app',
data: {
showNav: false
}
});
HTML
a. Wrap the nav section with the element "app" to make it reactive (this maps to the "el" property of the Vue instance).
<div id="app"> ... </div>
b. Update .navbar-burger using the v-on: directive to listen for the click event and toggle the data property showNav.
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
c. Update .navbar-menu using the v-bind: directive to reactively update the class attribute with the result of the showNav property.
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
Solution
I've included the entire solution in this jsfiddle
This may be an issue with the example given in the docs, I was able to get it working by adding ids to the .nav-toggle and .nav-menu.
<span id="nav-toggle" class="nav-toggle"> and <div id='nav-menu' class="nav-right nav-menu">
jsfiddle here.
So to get the example working, you'd have to add 'id's to the respective elements. I'd recommend deep diving into the docs though
(function() {
var burger = document.querySelector('.nav-toggle');
var menu = document.querySelector('.nav-menu');
burger.addEventListener('click', function() {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();
You can get it to work without using jquery or bulma.js. Just simply use your own javascript to add is-active to nav-menu class on click on nav-toggle.
nav-menu is collapsed.
nav-menu is-active is expanded.
I thought someome might be looking for a solution without jquery so there will be everything in one place.
To make the toggle click event work, just add the below js code. You may create a JS folder, then bulma.js file.
// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
(function () {
var burger = document.querySelector('.burger');
var menu = document.querySelector('#' + burger.dataset.target);
burger.addEventListener('click', function () {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
})();
At the end of your html page add the script.
ex:
<script async type="text/javascript" src="./js/bulma.js"></script>
There is an easier way! Before I get to that, it looks like there are a few problems with your Html.
First issue. You don't have the navbar structure set up like the documentation suggests. If you replace the nav-left with navbar-brand it will take care of some of your Html for you. In your code example, you have your logo as a nav-item inside of a nav-left. navbar-brand does exactly that. What you've done here may work but, I'm not sure exactly what that would do. From the documentation:
"navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons"
So if you take that out to the level of the of the container and within that, you can just put your logo inside the first navbar-item. Next thing is to pull the 'navbar-burgerinside of thenavbar-brand`.
"The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand."
Once that is set up you'll want to put the menu items you wish to collapse inside of the navbar-menu. This container should be a sibling of the navbar-brand so they should be on the same level together. So your code (within your container div) should look something LIKE SO:
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="../assets/icon.png" alt="something">
</a>
<div class="navbar-burger burger" data-target="Options">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="Options">
<div class="navbar-end">
<a class="nav-item" href="/about">About</a>
<a class="nav-item" href="/path">Path</a>
<a class="nav-item" href="/blog">Blog</a>
</div>
</div>
</nav>
The final piece to the puzzle is: you gotta set the data-target of your burger to the the id of the navbar-menu. It's not very clear that's what they are talking about in the docs. Whatever the case, after you make those changes, the javascript code from the documentation should work!
I realize that this question was asked many moons ago but I hope this can help SOMEONE.
Bulma Docs
http://bulma.io/documentation/components/navbar/
My simple but functional answer:
function toggleBurger() {
var burger = $('.burger');
var menu = $('.navbar-menu');
burger.toggleClass('is-active');
menu.toggleClass('is-active');
}
And in the burger tag:
<div class="navbar-burger burger" data-target="navMenu" onclick="toggleBurger()">
<span></span>
<span></span>
<span></span>
</div>
Here is an angular solution:
template - button (notice the last two lines)
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
[class.is-active]="showBurgerMenu"
(click)="showBurgerMenu = !showBurgerMenu">
template - menu (notice the last line)
<div
id="navbarBasicExample"
class="navbar-menu"
[class.is-active]="showBurgerMenu">
component (notice the showBurgerMenu property)
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.sass']
})
export class NavbarComponent {
showBurgerMenu: boolean;
constructor() {}
}
The bulma package does not provide any javascript. So you have to write it yourself. But you do not need anything fancy. Just make the id of toggled element and the data-target of the burger be the same. Something like this:
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu" id="navMenu">
<!-- navbar-start, navbar-end... -->
</div>
And add this javascript snippet into end of your file(note: you do not have to change anything):
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
And that is it! It works!
These codeblocks has been taken from documentation: https://bulma.io/documentation/components/navbar/#navbar-burger
you can also make it work with an inline onclick
<a role="button" onclick="this.classList.toggle('is-active');document.querySelector('#'+this.dataset.target).classList.toggle('is-active');" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="efpnavbar">
I had the same problem with Vue.js and I solved it like this :
<span class="navbar-burger burger" data-target="navbarMenu" #click="show()">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<div class="tabs is-right">
<ul>
<li><a>Home</a></li>
<li>Examples</li>
<li>Features</li>
<li>Team</li>
<li>Help</li>
</ul>
</div>
</div>
</div> </span>
then I added this code in methods section :
methods:{
show()
{
var burger = document.querySelector('.burger');
var menu = document.querySelector('.navbar-menu');
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
}}
I hope this code helps someone .
If you use SCSS and i.e. purge-css for your project, make sure the .is-active class is not stripped out by your css-purging...
For me then the vanilla example worked:
JS:
document.addEventListener("DOMContentLoaded", () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
});
and HTML:
<nav class="navbar headnavi is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<span class="is-size-3 is-size-5-mobile has-text-weight-semibold ml-2">{{ site.name }}</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="top">
<span aria-hidden="true" class="nav-toggle" ></span>
<span aria-hidden="true" class="nav-toggle" ></span>
<span aria-hidden="true" class="nav-toggle" ></span>
</a>
</div>
<div id="top" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/">
More
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
<div class="navbar-item">
<div class="buttons">
</div>
</div>
</div>
</div>
</nav>
I”m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website.
Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.
So my question is if it is possible to "embed" a html page in a specific section of another page.
For example I could have my sidebar be "static" and load in a login.html file in a specific div.
And having one html file with all the pages would be very hard to maintain and organise.
Is that possible in some kind of way?
EDIT: As requesting, I'm adding the most relevant code I already have
<ion-side-menus>
<!-- Main page-->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<!-- Knop toggleSidebar -->
<button class="button button-icon" ng-click="triggerSidebar()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Proof of concept</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col" col-50>5 + 8 = </div>
<div class="col" col-25><input type="number" placeholder="13"></div>
<div class="col" col-25><button class="button button-small">Controleer</button></div>
</div>
</ion-content>
</ion-side-menu-content>
<!-- End Main page -->
<!-- Sidebar -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
</ion-side-menu>
<!-- End sidebar -->
What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file
You can solve it using angular UI-routing:
$stateProvider
.state("menu", {
url: "/menu",
abstract: true,
templateUrl: "views/menu.html"
})
.state('menu.combinedPage1', {
url: '/combinedPage1',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded1.html",
controller: "EmbeddedController1"
}
}
})
.state('menu.combinedPage2', {
url: '/combinedPage2',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded2.html",
controller: "EmbeddedController2"
}
}
})
Here "menu" is abstract state and contains embedded views that controlled by router.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view name="EmbeddedContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
You can do it by using frames :) with only html the following code will help
<html>
<head>
<title>Multiple Pages</title>
</head>
<FRAMESET cols="20%, 80%">
<FRAME SRC="sidebar.html">
<FRAME SRC="content.html">
</FRAMESET>
</html>
also you can do it with php like this
#side_bar{
background-color: red;
width: 200px;
height: 100%;
float: left;
}
<div id="side_bar">
<?php
include_once('sidebar.html');
?>
</div>
You can make a link so when they click on the "profiles" it goes to another page and then you can put the code for your sidebar in a php document and use a php include tag to show it in the new page. See the example below:
sidebarCode.php:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
The new page:
<!--Specific Did You Want-->
<div>
<?php include 'sidebarCode.php';?>
</div>
Inside <ion-side-menu-content> you can load scripts via the ui router.
So what you can do is when a user clicks on a menu item, you store the page HTML as template using $templatecache and then just reload your view inside <ion-side-menu-content> that will do your job !