I'm trying to go to a page(template) using $state.go.
Controller
.controller('NavCtrl', function($scope, $location, $state) {
$scope.openDaily = function() {
$state.go('daily');
};
})
It works but for only a millisecond or something as it's redirected BACK to the '/select' page because the $state.otherwise says so.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('select', {
url: '/select',
templateUrl: 'templates/select.html',
controller: 'selectController'
})
.state('daily', {
url: '/daily',
templateUrl: 'templates/daily.html',
controller: 'dailyController'
});
$urlRouterProvider.otherwise('/select');
})
What is causing this please?
UPDATE
index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-view>
</ion-nav-view>
</body>
select.html
<ion-view title="Select" ng-controller="NavCtrl">
<ion-content>
<div class="list-card" ng-click="openDaily()">
<a href='#' class="item item-icon-left">
<i class="icon ion-home"></i>
Personal
</a>
</div>
</ion-content>
<div class="bar bar-footer bar-balanced">
<div class="title">Add File/Folder</div>
</div>
</ion-view>
and daily.html(template):
<ion-view title="Select" ng-controller="NavCtrl">
</ion-view>
Using Ionic Framework.
Please remove href='#' from <a> tag. Because this will call default state(Here it is select state).
Looks like a cache problem, because everything looks correct, make sure the file is changed on you browser inspector and anything is broken on the console.
P.S: You can use also ui-sref="daily", if you just want go to the page.
I know this question might be stupid,but after searching through all over the stackoverflow and other blogs,and video tutorials,I have no other choice left than to ask this on stackoverflow.
I have been learning Angular.js through online tutorials.
I have 2 files.
index.html and app.js
Here is some snaps of my code.
States Configuration Part inside app.js
angular.module('flapperNews', ['ui.router']).config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
})
$urlRouterProvider.otherwise('home')}]);
Inline templates inside index.html (1-home.html , 2-posts.html)
<ui-view></ui-view>
<script type="text/ng-template" id="/home.html">
<!--home.html part-->
</script>
<script type="text/ng-template" id="/posts.html">
<!--posts.html part-->
</script>
inside home.html I have a hyperlink on Comments.
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span>
<a ui-sref="/posts/{{$index}}">Comments</a>
</span>
</span>
</div>
Now when I run this WebApp on my localhost it is showing this rendered html of my Comment hyperlink,but it is not providing me any navigation(Hyperlink is not working).
<span>
<a ui-sref="/posts/0">Comments</a>
</span>
Now,I have two questions:
What went wrong with ui-sref part.When I use href instead of ui-sref then it is working perfectly fine.Why is this happening?
I have been using inline templates for home.html and posts.html,but if I make them into separate files then my entire app gets broken.Why?
Any help would be appreciative.
1)The way you have used ui-sref is what is causing it to break.Try this in your application,
<a ui-sref="posts({ id: $index })">Comments</a>
2)Assuming your new template files are as same level as your index.html and app.js you need not mention as templateUrl: '/posts.html',just use templateUrl: 'posts.html'.
I have an angular app with ui router with a nested view (in the config method):
$stateProvider
.state('home', {
url: '/home',
views: {
'mainView' : {
templateUrl: 'templates/home.html',
controller: 'HomeController'
}
},
authenticate: true
})
.state('home.cargaDePadrones', {
url: '/cargaDePadrones',
views: {
'contentView' : {
templateUrl: 'templates/cargaDePadrones.html',
controller: 'CargaDePadronesController'
}
},
authenticate: true
})
In the home view I have this:
<md-content layout="row" layout-fill>
<md-content ng-show="showTreeMenu" class="TextoInstitucional menuCell" flex="20">
<treecontrol class="tree-classic" tree-model="treeData" options="treeOptions"
on-selection="showSelected(node)" expanded-nodes="expandedNodes">
{{node.name}}
</treecontrol>
</md-content>
<div style="background-color: #CECECE; width: 9px;" layout="column" layout-align="center center">
<a flex href="#" ng-show="showTreeMenu" ng-click="toggleMenu()">
<img style="border: 0 none;" src="images/middle_toggle_left.gif" />
</a>
<a flex href="#" ng-show="!showTreeMenu" ng-click="$parent.toggleMenu()">
<img style="border: 0 none;" src="images/middle_toggle_right.gif" />
</a>
</div>
<md-content class="TextoGrande contentCell" style="padding-left: 10px;" ui-view="contentView" ng-cloak flex>
</md-content>
</md-content>
and in the home controller I've got this:
$scope.showTreeMenu = true;
$scope.toggleMenu = function() {
$scope.showTreeMenu = !$scope.showTreeMenu;
};
The idea is that whenever the user hits the anchor, a part of the page hides (the menu) to give it more space to work and when it hits the other anchor it bring the menu back.
The problem is that whenever I hit the anchor that is visible in the home view (executing the toggleMenu scope method) the content in the nested view (named 'contentView') dissapears. Looking at the browser path, it automatically routes from /home/cargaDeParones to /home (routing from the child state to the parent state). I'm assuming that this is happening because the toggleMenu method is defined in the Home controller, but I don't know how to prevent this behaviour.
How can I expose a parent's scope method without routing back to it??
Thanks :)
Anchor tags href value is '#'
, that is the reason it is taking to the home page. Please change the anchor tags href tag to :
<a flex href="JavaScript:void(0)" ng-show="showTreeMenu" ng-click="toggleMenu()">
<img style="border: 0 none;" src="images/middle_toggle_left.gif" />
</a>
After reading this I was able to fix the # problem in my URL. It works fine without the URL.
In index.html
<base href="/app-name/">
My URL :
http://localhost:7001/app-name
Before applying base URL I had
http://localhost:7001/app-name/#/home
1) When I type this in browser how does the URL change to http://localhost:7001/app-name/home?
I was able to change and navigate to diff levels of application when using #. But, after applying base in index.html I am unable to perform this and the browser throws a 404. Any suggestions on how to get this working?
Here is my navigation page
<div class='navbar-header'>
<a class='navbar-brand' href="home"><img alt='img' src="appName/images/logo.PNG" type="image/png" height="30"></a>
<div class="navbar-header">
<a class="navbar-brand" href="home"><b>App - Name</b></a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li> <span class="glyphicon glyphicon-home"></span> Home</li>
<li> <span class="glyphicon glyphicon-list-alt"></span> YYYYYYYYY </li>
<li> <span class="glyphicon glyphicon-hand-up"></span> XXXXXXXX</li>
</ul>
</div>
Router looks like this.
'use strict';
appName.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl : 'appName/models/scheduler/home.html',
controller : 'mainController'
})
.when('/logs', {
templateUrl : 'appName/models/logs/logs.html',
controller : 'logsController'
})
.when('/info', {
templateUrl : 'appName/models/quick_info/info.html',
controller : 'yyyyController'
})
.otherwise({redirectTo:'/home'});
// $locationProvider.html5Mode(true);
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Thanks for taking time to look into this.
I need to remove sidemenu only on my login page. Otherwise remain. How it can be done? I'm using command ionic ionic start myApp sidemenu to create the project.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})
login page
<ion-view title="Login">
<ion-content>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
</label>
</div>
</ion-content>
</div>
You can disable/enable sidemenu at any time at any page by calling
$ionicSideMenuDelegate.canDragContent(false)
e.g:
angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false)
});
**Ionic 2**
import { MenuController } from 'ionic-angular';
export class LoginPage {
constructor(public menuCtrl: MenuController) {
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import { MenuController } from '#ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now.
same issue here. just add hide-nav-bar="true" to the ion-view
<ion-view hide-nav-bar="true">
Hope it helps!
What you can do is define the login page without a sidemenu. Check your login page HTML template. Make sure you do not have the <ion-side-menus> and <ion-side-menu> elements in it. These are used on pages that need to have a sidemenu.
Your login page should look like this:
<ion-view>
<ion-content>
<!--your page content goes in here-->
</ion-content>
</ion-view>
To have sidemenu on other pages, just put the sidemenu content in a parent state which in your code is the app state.
Your menu.html file:
<ion-view>
<ion-side-menus>
<ion-side-menu>
<!--put your side menu content here-->
<!--any child state of app will inherit this sidemenu-->
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
A little late to the game but this is another option for those (like me) who need to keep their login view within the side-menu layout but need to hide the side menu button while keeping the view title.
Inside the login.html view use the ion-header-bar directive to create a new header with a title and then hide the ion-nav-bar in the side-menu layout via the ion-view tag.
Example (login.html)
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-view hide-nav-bar="true">
<!-- Login content goes here -->
</ion-view>
Then if you need to disable any drag gestures do so in the controller like #waqas suggests.
I have made a small demo for the question.
Plunker Demo
If you want a page differently from sidemenu.Create a new Parent state.
For example
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
Html :
<ion-view class="view-bg-blue" >
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Then call this state using /landing when ever you want.
I know this is late but here is a quick and easy solution.
Add this in your login Controller
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
<ion-side-menus>
bcn
<ion-tab title="ALL" href="#/dashbord/all" class="bgorange">
<ion-nav-view name="all"></ion-nav-view>
</ion-tab>
<ion-tab title="INFO" class="bgorange" href="#/dashbord/info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
<ion-tab title="EVENTS" class="bgorange" href="#/dashbord/events">
<ion-nav-view name="events"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-pane>
<div ng-include src="calender.html"></div>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item menu-close class="item-icon-left bottombordernone" href="#/dashbord">
<i class="icon ion-home"></i>
What's New
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone">
<i class="icon ion-chatbox-working"></i>
Feedback
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone" ng-click="logout()">
<i class="icon ion-power"></i>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
#Zulu here's my full code.
I hope this Ex. work for you.
// index.html
<body>
<section ui-view></section>
</body>
// routes.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html'
})
$urlRouterProvider.otherwise('/login')
it's work, see more here: angular-ui/ui-router
You have to watch the slide menu.
If it is open, you have to toggle it and close.
.controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
//
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio != 0) {
$ionicSideMenuDelegate.toggleRight();
}
});
})
Calling $ionicSideMenuDelegate.canDragContent(false) does disable the ability to swipe to access the menu, but does not hide the hamburger toggle button in the navbar (if you have one). To do that, you can use ng-show with $root binding in your ion-side-menu-content element like this:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"
ng-show="$root.showMenuIcon">
</button>
</ion-nav-buttons>
Then in your login controller:
$scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.beforeLeave', function (event) {
$scope.$root.showMenuIcon = true;
$ionicSideMenuDelegate.canDragContent(true);
});
you can also add this to your main app controller:
$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;
and simply switch it to false in every controller you dont want your side menu appear in:
$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;
add is-enabled="$root.enableLeft" to your html tag and ng-show="$root.showMenuIcon" to the button inside html tag.
Based on various answers here from everyone and 15 minutes of trying, here is my working example of it, and it should work as simply doing copy-paste
Your view, like login.html
<ion-view hide-nav-bar="true">
<ion-header-bar class="bar-light title-image" align-title="center">
<h1 class="title">Title</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-view>
Your related controller, like LoginCtrl
function LoginCtrl($scope, $ionicSideMenuDelegate) {
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
}
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/loginpage.html'
})
.state('app.account', {
url: '/account',
views: {
'menuContent': {
templateUrl: 'templates/account.html',
controller: 'AccountCtrl'
}
}
})
import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';
#Page({
templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
constructor(nav: NavController, userData: UserData, menu: MenuController) {
this.nav = nav;
this.userData = userData;
this.login = {};
this.submitted = false;
this.menu = menu;
}
onLogin(form) {
this.submitted = true;
if (form.valid) {
this.userData.login();
this.nav.push(TabsPage);
}
}
onSignup() {
this.nav.push(SignupPage);
}
onPageDidEnter() {
// the left menu should be disabled on the login page
this.menu.enable(false);
}
onPageDidLeave() {
// enable the left menu when leaving the login page
this.menu.enable(true);
}
}
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
</ion-content>
</ion-pane>
This is works for me ...
I think the simplest solution in opening the login page in a modal view, checkout $ionicModal