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>
Related
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
I have an ionic app, where I have one side menu for multiple pages. I would like to change the links in the side menu based on whether the user is authenticated or not. So, in the routes I have set up the templates and pages like this:
module.export = angular.module('coop').config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//side menu
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'templates/main.html',
})
.state('main.public', {
url: '/public',
views: {
'content': {
templateUrl: 'templates/public.html',
controller: 'PublicController'
}
},
authenticate: false
})
.state('main.articles', {
url: '/articles',
views: {
'content': {
templateUrl: 'templates/articles.html',
controller: 'ArticlesController'
}
},
authenticate: true
})
So, the links should be different for the states main.public and main.articles and all the other states based on whether the state has authenticate: true or false. How can I check that in the side menu?
<ion-side-menus>
<ion-side-menu side="left" class="side-menu" scroll="false">
<ul class="menu">
<div class="side-menu-header">
</div>
<div class="menu-main">
<li>
<a ng-if="authenticated" menu-close ui-sref="main.profile">Min profil</a>
<a ng-if="!authenticated" menu-close ui-sref="main.login">Logg in</a>
</li>
</div>
<div class="menu-last">
<li>
<a ng-if="authenticated" menu-close ui-sref="main.logout">Logg out</a>
</li>
</div>
</ul>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="content"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Update
For anyone how might need this, I solved it by setting the rootscope variable on stateChangeStart of the app.js:
// Check for login status when changing page URL
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
var currentRoute = toState.name;
$rootScope.authenticated = false;
if ($auth.isAuthenticated()) {
$rootScope.authenticated = true;
}
You did it actually. In the controller add $scope.authenticated = $state.authenticate
Or set a global value globals.authenticated in a service called globals on login/logout. Then use it in the side menu. ng-if="globals.authenticated"
Or you can set it in the loacal storage/ sqlite
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');
});
i'm new in ionic ( just a little less in angularjs ) .
i'm trying to do a simple switch between two views:
HTML
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="intro"></ion-nav-view>
<ion-nav-view name="login"></ion-nav-view>
<ion-nav-view name="home"></ion-nav-view>
<ion-nav-view name="pizze"></ion-nav-view>
<ion-nav-view name="sponsor"></ion-nav-view>
<ion-nav-view name="scontrino"></ion-nav-view>
</body>
APP.js
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('intro', {
url: '/intro',
views: {
'intro': {
templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'
}
}
})
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$urlRouterProvider.otherwise('/intro');
});
Controllers.js
angular.module('starter.controllers', [])
.controller('IntroCtrl', function($scope,$location) {
$location.url("/login");
})
.controller('LoginCtrl', function($scope,$location) {
})
Intro is shown correctly but when it tries to change location to "login.html" it says:
TypeError: Cannot read property 'querySelectorAll' of undefined
at cancelChildAnimations (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30611:21)
at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30176:11)
at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:38411:24)
at updateView (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41540:31)
at eventHook (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41501:17)
at Scope.$broadcast (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:21190:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:33975:22)
at wrappedCallback (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19894:81)
at http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19980:26
at Scope.$eval (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:20906:28)
What could be the problem???
Thanks!
Try this
angular.module('starter.controllers', [])
.controller('IntroCtrl', function($scope,$state) {
$state.transitionTo("login");
})
.controller('LoginCtrl', function($scope,$location) {
})
You are using the view names wrong.
In a state, the view's name
views: {
'_name_': {
}
is used for different navigation histories for different views.
Say you have two tabs, home and pizza, and you want both to have several pages, then the view name comes in handy.
For your example it is important to know, how you want the views to be used.
I set up an example for you, making the views accessible in tabs.
See here for that example: http://plnkr.co/edit/Yd5ehQd0wnwlPzP0KYnp?p=preview