I am able to hide tab bar when I am pushing a new page. but while coming back to main screen, I am not able to show tab bar again with script if i press device back button.
Please help. Following is the code :
module.run(function($rootScope){
$rootScope.incremental = 0;
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
if ($rootScope.home.getPages().length > 1) {
$rootScope.hide = 'false';
$rootScope.home.popPage();
e.preventDefault();
} else {
$rootScope.incremental++;
if($rootScope.incremental == 1){
ons.notification.confirm({
message: 'Are you sure you want to exit?',
title: 'Exit App?',
buttonLabels: ['Yes', 'No'],
cancelable: true,
callback: function(index) {
if(index == 0){
navigator.app.exitApp();
} else {
$rootScope.incremental = 0;
e.preventDefault();
}
}
});
e.preventDefault();
} else {
e.preventDefault();
}
}
}
});
<ons-tabbar animation="fade" hide-tabs="{{$root.hide}}">
<ons-tab active="true" page="index.html">
<div class="tab">
<ons-icon icon="ion-home" class="tab-icon"></ons-icon>
<div class="tab-label">Home</div>
</div>
</ons-tab>
<ons-tab page="about.html">
<div class="tab">
<ons-icon icon="ion-information-circled" class="tab-icon"></ons-icon>
<div class="tab-label">About App</div>
</div>
</ons-tab>
</ons-tabbar>
in the corresponding controller you can show it again right ? just you have to add show it again inside the controller and outside the function. When you click the function it will again hide. when you come back it will show
Related
I have authentication for my login when wrong email format, email or password, it will show a pop up error. However if nothing is type in both email and password, it will stuck at loading page. Anybody has a solution?
login.html
<ion-view title="Login" hide-nav-bar="true" hide-back-button="true" id="page6">
<ion-content padding="true" style="background: url(img/fOM24l77SrSIyzBwqvMz_login.jpg) no-repeat center;background-size:cover;" class="manual-ios-statusbar-padding">
<div class="spacer" style="width: 300px; height: 82px;"></div>
<h4 style="color: #FFFFFF;" align="center">Login with your NYP SIT account</h4>
<form name="loginForm" class="list " id="login-form1">
<ion-list class=" " id="login-list2">
<div class="app-icon"></div>
<label class="item item-input item-floating-label">
<span class="input-label" style="color: #9F9F9F;">Email</span>
<input ng-model="user.email" style="color: white;" type="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label" style="color: #9F9F9F;" >Password</span>
<input ng-model="user.password" style="color: white;" type="password" placeholder="Password">
</label>
</ion-list>
<div style="height: 40px;" class="spacer"></div>
<button ng-click="loginEmail(loginForm,user)" class=" button button-assertive button-block icon-left ion-ios-email-outline " id="signup-button3">LOGIN WITH EMAIL</button>
</form>
</ion-content>
</ion-view>
controller.js
.controller('loginCtrl', function($scope, $rootScope, $ionicHistory, sharedUtils, $state, $ionicSideMenuDelegate) {
$rootScope.extras = false; // For hiding the side bar and nav icon
// When the user logs out and reaches login page,
// we clear all the history and cache to prevent back link
$scope.$on('$ionicView.enter', function(ev) {
if(ev.targetScope !== $scope){
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
}
});
//Check if user already logged in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
//Removes back link to login page
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true); // Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('tabs.home', {}, {location: "replace"});
}
});
$scope.loginEmail = function(formName,cred) {
if(formName.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading(); //starts the loading popup
//Email Login via Firebase
firebase.auth().signInWithEmailAndPassword(cred.email,cred.password).then(function(result) {
// You dont need to save the users session in your local session or cookies. Firebase handles it.
// You only need to :
// 1. clear the login page history from the history stack so that you cant come back
// 2. Set rootScope.extra;
// 3. Turn off the loading
// 4. Got to menu page
$ionicHistory.nextViewOptions({
historyRoot: true //1
});
$rootScope.extras = true; //2
sharedUtils.hideLoading(); //3
$state.go('tabs.home', {}, {location: "replace"}); //4
},
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("ERROR!","Authentication Error");
}
);
}else{
sharedUtils.showAlert("ERROR!","Enter in email format");
}
};
})
i think its better to check if the field is empty or not if fields are empty then you can show an error message
$scope.loginEmail = function(formName, cred) {
if (formName && cred) { //checking for null
if (formName.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading(); //starts the loading popup
//Email Login via Firebase
firebase.auth().signInWithEmailAndPassword(cred.email, cred.password).then(function(result) {
$ionicHistory.nextViewOptions({
historyRoot: true //1
});
$rootScope.extras = true; //2
sharedUtils.hideLoading(); //3
$state.go('tabs.home', {}, {
location: "replace"
}); //4
},
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("ERROR!", "Authentication Error");
}
);
} else {
sharedUtils.showAlert("ERROR!", "Enter in email format");
}
} else {
sharedUtils.showAlert("ERROR!", "Fields cannot be empty");
}
};
All:
What I want to do is add a key listener to control a menu toggle on the page.
<body ng-controller="main" ng-keydown="toggleSideBar($event)">
In main controller:
$scope.sidebarOpen = false;
$scope.toggleSideBar = function(e){
if(e.keyCode == 18){ // 'ALT' key
$scope.sidebarOpen = !$scope.sidebarOpen;
}
}
In the template:
.sidebar {
left:100px;
transition: left 0.5s;
}
.sidebar.open {
left:0px;
transition: left 0.5s;
}
<div class="sidebar" ng-class="{'open': sidebarOpen}">
When I press ALT key, every other time, it can response, I am not sure what happens, any help?
UPDATE
Later on, I find what wrong with this:
This is a specific case(when u hit ALT), the Chrome will use ALT as shortcut to toggle focus on its customize setting button:
That is why every other time, my key down can be responded. So, now the question becomes: How to bypass this?
Thanks
Works fine for me, do you have any browser constraint here and also can you update the fiddle.
<div ng-app>
<h2>Example</h2>
<div ng-controller="myController">
<input ng-keydown="keypress($event)">
<p>key: {{lastKey}}</p>
<div ng-keydown="keypress($event)">
</div>
</div>
</div>
JS Code:
function myController($scope) {
$scope.lastKey = "---"
$scope.keypress = function(e) {
if(e.keyCode === 18){ // 'ALT' key
//$scope.sidebarOpen = !$scope.sidebarOpen;
$scope.lastKey = e.keyCode
}
};
}
http://jsfiddle.net/7tyf64dp/
My code as follows :
<ons-page ng-controller="stockController">
<ons-toolbar class="DCF" id="stockToolbar" ng-if = "orientation">
<div class="left">
<ons-back-button style="color:white;"></ons-back-button>
</div>
<div class="center" style="font-size:22px;" >Stock</div>
</ons-toolbar>
<highchart id="chart1" config="chartConfig" class="span10"></highchart>
</ons-page>
Controller as follows:
if (Math.abs(window.orientation) === 90) {
$scope.orientation = false;
$scope.$apply();
} else {
$scope.orientation = true;
$scope.$apply();
}
window.onorientationchange = function(){
if (Math.abs(window.orientation) === 90) {
$scope.orientation = false;
$scope.$apply();
} else {
$scope.orientation = true;
$scope.$apply();
}
}
I just set the ng-if="false" or ng-if="true" it works fine, but when I run my code, it does not work, the toolbar forever display.
Anybody can help me to solve this problem?
Can you please use the orientation as Boolean type, rather than string with $scope.$digest(); at end of your javascript function. I tried in my local its working.
Thanks
I have a question about the AngularJS editable framework. When using an editable, two buttons appear: the save button and the cancel button. However, I want a third button (with a minus symbol) to delete the text in the editable. How can I add a third delete button?
Here is a fiddle of one of my previous questions:
Example with only two buttons
{{ user.name || 'empty' }}
Don't think they have support for this right now.
I've done it myself.
var app = angular.module("app", ["xeditable"]);
app.run(function (editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function ($scope) {
$scope.user = {
name: 'awesome user'
};
$scope.showClear = function () {
$scope.show = true;
}
$scope.empty = function () {
$scope.user.name = "";
$scope.show = false;
}
});
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<span href="#" editable-text="user.name" ng-click="showClear()">{{ user.name || 'empty' }}</span>
<button class="btn btn-default" ng-click="empty()" ng-show="show">
-
</button>
</div>
Hope this will help :).
I have a button which when clicked displays a windows and hides it when the button is clicked again.I want the window to close even if any other place in the page is clicked.
This is my code :
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">
//The div to show hide
<div ng-class="{'open':content}" > div content </div>
I wrote the following window on click code in the controller but it didn't work..
$window.onclick = function () {
if($scope.contentClick){
$scope.contentClick=0;
}
else{$scope.content=false;
$scope.$apply();}
}
What is the correct way to do this?Can anyone please guide me in the right direction.Thanks.
Try this, change your controller ID:
window.onclick = function () {
var scope = angular.element(document.getElementById('controller_id')).scope();
if(scope.contentClick){
scope.contentClick=0;
}
else{
scope.content=false;
scope.$apply();
}
}
I'm not sure what do you want to achieve after content was clicked, but you can $watch content value in controller and run some action when content change value
Please see script below
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.$watch('content', function(value) {
if (value) {
$scope.contentClick = 1;
} else {
$scope.contentClick = 0;
}
})
});
.open {
color: red ;opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">Click me </a>
<hr/>//The div to show hide
<div ng-class="{'open':content}">div content {{contentClick}}
</div>
</div>
</div>