I am new to ionic, and what causes me most difficulty is the subject of navigation.
I have two tabs called "Dashboard" and "friends". I would like that when I click on the dashboard button, I can navigate to the subview that is called "subview_dash", but I do not want the tabs to be shown in this view. My problem is that I know how to navigate to this view, but I can not make the return button appear in "subview_dash".
How can I do it? I would appreciate it too.
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'tab-friends.html',
controller: 'DashCtrl'
}
}
})
.state('subview_dash', {
url: '/subview_dash',
templateUrl: 'tab-subview_dash.html',
controller: 'DashCtrl'
})
This is my code:
http://plnkr.co/edit/Az3w9O8rkr7fJw4unIDz?p=preview
You use this code in tab-subview_dash.html
<ion-view title="subview_dash">
<ion-nav-buttons side="left">
<button class="button button-clear ion-arrow-left-c" ng-click="backButton()"></button>
</ion-nav-buttons>
<ion-content class="has-header">
friends
</ion-content>
</ion-view>
and write your function for backButton() give path where you want to redirect
Related
I try to create an ionic app which contains tabs
this is my tabs
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
inside the chat detail tab , I have button ( student list) should take me to another view and keep me inside the chat tab
so , how to do this ?
this is chat detail page
<ion-view view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.name}}
</p>
<p>
{{chat.instructor}}
</p>
<ion-toggle ng-model="chat.availabe">
Available
</ion-toggle>
<a class="button button-block button-royal">
List Student
</a>
</ion-content>
</ion-view>
I highly recommend you checking out the directives already built into ionic v1 https://ionicframework.com/docs/api/directive/ionTabs/
In your html
<button class="button button-block button-royal" ng-click="changeState()">
List Student
</button>
Then in your associated controller (I believe its ChatDetailCtrl, dont forget to inject $state)
$scope.changeState = function() {
$state.go('tab.example'); //
};
app.js
.state('tab.example', {
url: '/example',
views: {
'tab-chats': {
templateUrl: 'templates/example.html',
controller: 'ChatDetailCtrl'
}
}
})
I have an icon in the nav bar should display or not according to position true / false toggle . Testing in view works perfectly but the result does not work in the nav bar . Both pages use the same controller . Translator English
index.html - nav-bar
<ion-nav-bar class="bar-stable" ng-controller="DashCtrl">
<ion-nav-buttons side="right">
<i class="icon ion-eye ng-show="vaovivo.valor"></i>
</ion-nav-buttons>
<ion-nav-bar
Account.html - toggle
<ion-toggle ng-model="vaovivo.valor" ng-checked="vaovivo.valor">
Modo ao Vivo
</ion-toggle>
Controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope,$rootScope) {
$scope.vaovivo = {'valor':false}
})
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'DashCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
UPDATE:
index.html - nav-bar
<ion-nav-bar class="bar-stable" ng-controller="DashCtrl">
<ion-nav-buttons side="right">
<i class="icon ion-eye" ng-show="vaovivo.valor"></i>
</ion-nav-buttons>
<ion-nav-bar>
The logic looks sound but there is one thing that might prevent the ng-show to work in the nav-bar. You are not closing the ion-nav-bar properly and might be the issue.
Firstly, close of the ng-class properly like by adding a closing quote
<i class="icon ion-eye" ng-show="vaovivo.valor"></i>
Secondly close the ion-nav-bar properly.
</ion-nav-bar>
When I view the page in Google Chrome and I click on the goal list that has been generated the URL changes to URL/#/tabs/personalview but the view fails to change.
This is the code in my personalGoals.html file:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" href="#/tabs/personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
This is the code in my app.js file:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$stateProvider
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.personal', {
url: '/personal',
views: {
'personalGoals-view': {
templateUrl: 'templates/personalGoals.html',
controller: 'personalCtrl'
}
}
})
.state('tabs.personalview', {
url: '/personalview',
templateURL: 'templates/test.html',
controller: 'personalViewCtrl'
})
.state('tabs.relationship', {
url: '/relationship',
views: {
'relationshipGoals-view': {
templateUrl: 'templates/relationshipGoals.html',
controller: 'relationshipCtrl'
}
}
})
.state('tabs.squad', {
url: '/squad',
views: {
'squadGoals-view': {
templateUrl: 'templates/squadGoals.html',
controller: 'squadCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('tabs/dashboard');
});
You can see the full code over here.
Any help would be greatly appreciated, thank you in advance.
I think your problem is that you're trying to navigate to the wrong URL.
You are trying to navigate to the state name when you should be navigating to the state URL.
There are two ways to do this:
You can continue to use href, and change the URL to #/personalview
You can use ui-sref instead of href and do something like ui-sref="tabs.personalview"
You might check out the following for reference:
https://www.thepolyglotdeveloper.com/2014/11/using-ui-router-navigate-ionicframework/
https://www.thepolyglotdeveloper.com/2014/12/using-nested-states-angularjs-ui-router/
Best,
I am trying to make a simple side menu with chats events and settings tab. It runs if i remove the settings and events block from the routes js file but shows nothing.
Snippets are below and here is a link to the entire meteor folder to run on your comp if needed - https://drive.google.com/folderview?id=0B2MX6dSPUGBMTnMtWVVqLVcwNDQ&usp=sharing
I keep getting an error saying this:
=> Meteor server restarted
Started your app. App running at: http://localhost:3000/
Errors prevented startup: While processing files with pbastowski:angular-babel (for target web.browser):
client/scripts/routes.js:20:4: Babel transform error
Your application has errors. Waiting for file change.
routes.js and settings.html respectively
angular
.module('myapp')
.config(config);
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'client/templates/tabs.html'
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'client/templates/chats.html'
}
}
});
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'client/templates/events.html'
}
}
});
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'client/templates/settings.html'
}
}
});
//$urlRouterProvider.otherwise('tab/recents');
}
<!-- settings.html, events.html, chats.html are all pretty much the same -->
<ion-view view-title="Settings">
<ion-content>
</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="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-royal">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item menu-close title="Chats" href="#/app/chats">
Chats
</ion-item>
<ion-item menu-close title="Events" href="#/app/events">
Events
</ion-item>
<ion-item menu-close title="Settings" href="#/app/settings">
Settings
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It looks like you some semicolons in there that shouldn't be there. The calls to state must be nested, so don't end them with a semicolon unless it's your last one. Updated code:
angular
.module('myapp')
.config(config);
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'client/templates/tabs.html'
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'client/templates/chats.html'
}
}
})
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'client/templates/events.html'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'client/templates/settings.html'
}
}
});
//$urlRouterProvider.otherwise('tab/recents');
}
Ideally, all 3 methods ought to work.
This codepen below shows all 3 methods well.
Correct and working CodePen Demo app
Currently, neither of the 3 methods work; the navbar just dissappears upon clicking the button (shows empty nav bar) while the core page remains the same main page.
Im not sure if its an code problem, ionic issue or just simply I should not transit to a new page from a navbar. The last one is too illogical to accept though.
Would any kind souls know where the issue lie and help me please?
My core content code in index.html
<body animation="slide-left-right-ios7">
<ion-nav-bar class="bar-light nav-title-slide-ios7"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
The button html I have (Note all 3 versions were tested seperately)
<ion-view ng-controller="NavCtrl">
<ion-nav-buttons side="left">
<button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button>
<button class="button button-icon ion-compose" ui-sref="tab.newpost"></button>
<button class="button button-icon ion-compose" href="/tab/newpost"></button>
</ion-nav-buttons>
<ion-content class>
<!-- Rest of the content body here -->
</ion-content>
</ion-view>
Code in nav.js mainly for the state.create method
app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
$scope.post = {url: 'http://', title: ''};
$scope.create = function(stateName) {
/* $location.path('/tab/newpost'); */
$state.go(stateName); /* tried swapping stateName with 'tab.newpost' and func() */
};
});
Code for app.js (Route file)
var app = angular.module('MyApp', ['ionic','firebase']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.posts', {
url: '/posts',
views: {
'tab-posts': {
templateUrl: 'templates/tab-posts.html',
controller: 'PostsCtrl'
}
}
})
.state('tab.newpost', {
url: '/newpost',
views: {
'tab-newpost':{
templateUrl: 'templates/tab-newpost.html',
controller: 'NewCtrl'
}
}
});
/* + other states .... */
$urlRouterProvider.otherwise('/auth/login');
});
First method you used according to the your code look like this
ng-click="create('tab/newpost')"
It should be
ng-click="create('tab.newpost')"
i think you need to modify states name so you can navigate between them
var app = angular.module('MyApp', ['ionic','firebase']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.posts', {
url: '/posts',
views: {
'tab-posts': {
templateUrl: 'templates/tab-posts.html',
controller: 'PostsCtrl'
}
}
})
.state('tab.newpost', {
url: '/newpost',
views: {
'tab-posts':{ /* the same name of the above state */
templateUrl: 'templates/tab-newpost.html',
controller: 'NewCtrl'
}
}
});
/* + other states .... */
$urlRouterProvider.otherwise('/auth/login');
});