i am kinda new to this UI-Routing concept, so i was wondering the following.
Is it possible to change a top view from within a nested one.
So we start at index and call Account state within that view i call the Account.login view by using:
<a ui-sref="Account.login"></a>
Now is it possible to call the Index state again from within Account.login view and how would one accomplish that.
.state('Home', {
url: "/",
templateUrl: "pages/Home.html",
})
.state('Account', {
url: "/profile",
templateUrl: "pages/Account.html"
})
.state('Account.login', {
url: "/login",
templateUrl: "pages/Account_Login.html"
})
.state('Account.register', {
url: "/register",
templateUrl: "pages/Account_Register.html"
})
Working with Ionic Framework.
Main Page:
<ion-header-bar align-title="center" class="custom_Header">
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon" style="background-color:#4D8693"></button>
</div>
<h1 class="title"><a ui-sref="Home" style="text-decoration: none"><img src="img/Header.png" /></a></h1>
<div class="buttons">
<button menu-toggle="right" class="button button-icon icon ion-gear-b" style="background-color:#4D8693"></button>
</div>
</ion-header-bar>
<ion-content class="has-header">
<ion-nav-view></ion-nav-view>
</ion-content>
Account.html:
<div class="has-header">
<a ui-sref="Home">
<img src="img/test.png" />
</a>
</div>
If i now press on that image on Account view, it will return me to my main page but without my buttons in the header, the image in the middle is still there.
Including: http://play.ionic.io/app/2f5cc1913037
Related
I want to create and manage sub views in ionic but I couldn't figure out how to make it work, I want to make my login and dashboard pages as abstract, and all other pages be the sub views of dashboard :
for example : dashboard.fax or dashboard.inbox or dashboard.fax.send
I think my problem is my root ion_nav_view directive but I'm not sure, any suggestion how to make it work ?
index.html >>
<body ng-app="modiran">
<ion-nav-view name="menuContent"></ion-nav-view>
<!--<div data-ui-view="menuContent"></div>-->
</body>
partials/login.html >>
<ion-view view-title="login">
<ion-pane>
<div class="login">
<ion-content padding="true" scroll="false" ng-controller="SignInCtrl">
<div style="margin-top: 90%">
<div class="list list-inset login_inputs">
<label class="item item-input item-icon-right item-input-wrapper">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" ng-model="user.username" placeholder="username" class="text-right">
</label>
</div>
<div class="list list-inset login_inputs">
<label class="item item-input item-icon-right item-input-wrapper">
<i class="icon ion-locked placeholder-icon"></i>
<input type="password" ng-model="user.password" placeholder="password" class="text-right padding-right">
</label>
</div>
<button class="item button button-block button-dark" ng-disabled="!user.username || !user.password"
ng-click="signIn(user)">login
</button>
</div>
</ion-content>
</div>
</ion-pane>
</ion-view>
partials/dashboard.html >>
<ion-view view-title="dashboard">
<ion-pane>
<ion-header-bar class="bar bar-header bar-dark" align-title="right">
<button class="button"><img src="img/navcon-logo.png" style="width: 35px; height:35px;"/></button>
<h1 class="title">modiran</h1>
</ion-header-bar>
<ion-content has-header="true" scroll="false" ng-controller="DashboardCrtl">
<div style="margin-top: 90%" class="dashboard">
<!--<i class="dash-icon"><img src="../img/24.png" style="width: 60%;height: 60%;"></i>-->
<img ng-src="img/Menubtn.png" style="width: 5%;height: 5%;margin-top: -8%;float: left;">
<img ng-src="img/MenubtnR.png" style="float: right;width: 5%;height: 5%;margin-top: -8%;">
<div class='circle-container'>
<a class='center' ng-click="GoTo('SmartOffice')"><img src="img/24.png"></a>
<a class='deg0'>
<img src='img/3.png'
onmouseover="this.src='img/3sel.png'"
onmouseout="this.src='img/3.png'">
<!--onmouseover="this.src='../img/3sel.png'"-->
</a>
<a class='deg45'>
<img src='img/4.png'
onmouseover="this.src='img/4sel.png'"
onmouseout="this.src='img/4.png'">
</a>
</div>
</div>
</ion-content>
</ion-pane>
</ion-view>
app.js >>
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
abstract: true,
templateUrl: 'partials/login.html',
controller: 'SignInCtrl'
})
.state('dashboard', {
url: '/dashboard',
abstract : true,
templateUrl: "partials/dashboard.html",
controller: 'DashboardCrtl'
})
.state('dashboard.SmartOffice', {
url: '/SmartOffice',
views: {
'menuContent': {
templateUrl: "partials/SmartOffice.html",
controller: 'SmartOfficeCtrl'
}
}
})
.state('dashboard.Fax', {
url: '/Fax',
views: {
'menuContent': {
templateUrl: "partials/fax/Fax.html",
controller: 'Ù‘FaxCtrl'
}
}
})
$urlRouterProvider.otherwise('/login');
})
Try the following changes:
Remove name="menuContent" from the <ion-nav-view>. Why? login state doesn't specify where template should be loaded, by default it will load in the only available <ion-nav-view>, without a name. In case you want to add it, add it this way:
views: {
'menuContent': {
templateUrl: "partials/login.html",
controller: 'SignInCtrl'
}
}
Similarly for dashboard. To keep it simple, avoid giving name unless you have more than one nav views where templates can be loaded.
Your login state shouldn't be abstract state because you want to show login page.
You might need to check if user is logged in or not and conditionally show login or dashboard. You can do this in app.run block.
Following is my simple routes in app.js -
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'signupCtrl'
})
.state('profile', {
url: '/profile',
abstract: true,
templateUrl: 'templates/profile.html',
})
.state('profile.init', {
url: '/profile-init',
templateUrl: 'templates/profile-init.html'
})
I created a button in signup page on click which should take the user to profile-init page code - $state.go('profile.init')
in profile.html I placed -
<ion-content style="background: #c3c3c3"></ion-content>
in profile-init.html page -
<ion-header-bar class="bar-positive">
<h1 class="title">Profile</h1>
</ion-header-bar>
<div class="row">
<div class="col col-10"></div>
<div class="col col-80 padding">
Thanks for showing your interest
</div>
<div class="col col-10"> </div>
</div>
<ion-footer-bar class="bar-stable">
<button class="button button-clear" ng-click="hello()">Forward</button>
</ion-footer-bar>
But it is moving to /#/profile/profile-starter page but only a background color is coming not text, though I checked the browser console template is loading, let me know what I am doing wrong here.
Create ion-nav-view
<ion-nav-view name="profile"></ion-nav-view>
and modify routes in app.js
.state('profile.init', {
url: '/profile-init',
views: {
'profile': {
templateUrl: 'templates/profile-init.html'
}
}
})
Can't comment yet, and not available to test it but I think you need to use dot ('.') in your file name:
templateUrl: 'templates/profile.init.html'
And of course change the file name too.
Hi I'm relatively new to ionic and I'm trying to get an app running with both a side-menu and a tab bar. Currently the tab bar is working fine just the left side menu does not open when I click the icon. For most of the app I've just been working off of the tutorials on the ionic website.
I am adding google maps to the tabs and I am aiming to have facebook login for the sidebar but the main issue is the tab isn't toggling.
app.js
$stateProvider
.state('menu', {
url: "/menu",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('menu.playlists', {
url: "/playlists",
views: {
'menu' :{
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
tab-map.html
<ion-view view-title="Safety First">
<ion-nav-buttons side="left" ng-controller="AppCtrl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content ng-controller="MapCtrl">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menu" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/about">
About
</ion-item>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is an image of the app's main page
When I click the submenu icon it does not toggle the submenu. The odd part is that If I navigate the app to http://localhost:8100/#/menu/playlists the toggling is fine.
Any suggestions on why nothing is really firing on the click? Perhaps its an issue of which controller is acting at the time?
You have to call the correct function. I'm assuming login() is located inside AppCtrl controller. Because of that, ng-click can't find the function, unless you tell it where it's located. Since AppCtrl is responsible for menu.html, you have to call it like this:
ng-click="this.login()"
I just started using ionic a few days ago, and I came into an issue.
I am trying to do a side menu where the content would be linked to data present into a controller, and I managed to do it. But what I can't find a solution to, is when you click into that element in the side menu, it shows the full data about the element using the id to find it.
I don't really know how to explain it, so it might be more clear with some code :
app.js :
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
//leaderboard special menu
.state('leader', {
url: '/leader',
abstract: true,
templateUrl: 'templates/leaderMenu.html',
controller: 'UserCtrl'
})
.state('leader.single', {
url: '/users/:leaderId',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
}
}
})
.state('leader.user', {
url: '/user',
templateUrl: 'templates/leader_user.html'
})
controller.js :
.controller('UserCtrl', function ($scope) {
$scope.leaderboard = [
{ image: 'jean_kevin.jpg', name: 'Jean-caca', id: 1, star_number: 50 },
{ image: 'jean_kevin.jpg', name: 'Jean-kevin', id: 2, star_number: 42 },
{ image: 'jean_kevin.jpg', name: 'Jean-kevin', id: 3, star_number: 20 }
];})
leaderMenu.html :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">LeaderBoard</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="user in leaderboard" menu-close href="#/leader/users/{{user.id}}">
<div class="item item-avatar">
<img src="/img/{{user.image}}" />
<h2>{{user.name}}</h2>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
and user.html :
<link href="../css/my_account.css" rel="stylesheet">
<ion-view view-title="User">
<ion-content>
<div class="photoList">
<ion-list>
<ion-item ng-repeat="user in leaderboard">
<div class="item item-thumbnail-left" style="border:0px">
<img src="../img/{{user.image}}" />
<h2>{{user.name}}</h2>
{{user.star_number}} <i class="icon ion-star"></i>
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I know it's not the right way to do in user.html, but I have no idea how to get the id that was selected in that page.
Thanks for your help
You can acces route parameters in controller by using $stateParams service. For your case you can access leaderId like this $stateParams.leaderId. Dont forget to include $stateParams in your controller. One more thing, by seeing your code, i will suggest you to use different controllers. You are using same UserCtrl for sidemenu and other page.
See this Documentation to $stateParams.
I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})