I built a simple application that has a home page, a login page and a contacts page, based on the Ionic example on Codepen. My application is here. Login controller sets a $rootScope.user variable when we log in:
.controller('LoginCtrl', function($scope, $rootScope, $state) {
$scope.login = function(){
$rootScope.user = {name:"lyman"};
$state.go("tabs.contact");
};
})
After login we correctly get redirected to the Contacts screen, Contacts tab is shown and highlighted. Now click on the Home tab. Expected behavior: I should see the Home page saying I'm logged in. What I get: the title changes to Home, Home tab is highlighted, but the view changes to templates/login.html template! You can still navigate to Contacts, log out from there, and then navigation stops working altogether. What am I missing?
Another oddity is that ng-show and ng-hide directives are being completely ignored when trying to hide and show tabs, only ng-if works. I'm thinking maybe the issue is because I'm using ng-if to insert and remove tabs from the markup and with ion-nav-view residing inside of the ion-tab tab? What would be the workaround?
So, yes, using ng-if to hide/show tabs will screw up navigation. The solution is to use the tab's hidden property as demonstrated in this fork of my original example:
<ion-tab title="Log In" icon="ion-ios-person" ui-sref="tabs.login" hidden="{{ loggedIn() }}">
<ion-nav-view name="login-tab"></ion-nav-view>
</ion-tab>
Controller:
.controller('TabsCtrl', function($scope, $rootScope) {
$scope.loggedIn = function() {
if ($rootScope.user) {
return true;
}
return false;
};
})
Related
I google this case for many solutions but no one can solve my problem.
Here is my problem:
I need to go to a detail page from some views,so I create a new router.
.state('detail',{
url:"/detail/:msgId",
templateUrl:"templates/detail.html",
controller:"detailCtrl"
});
When I navigate to my detail page from home page, ionic don't display the back button on detail page and there is no animation,so I found this solution from How to force Ionic display back button on certain page?,and add nav-direction in home page :
home page:
<a ng-bind-html="item.text | linkformat" ui-sref="detail({msgId:'{{item.id}}'})" class="text" nav-transition="ios" nav-direction="forward"></a>
detai page controller:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
so the back button display again,but when I click it and back to home page, the animation disappear again.I change the ion-nav-view like this,but it does not help.
<ion-nav-view animation="slide-left-right">
I have the following setup:
I have a header controller which controls the top navbar of the page. When entering a different route I want to change the nav layout. The problem I am having is that I can detect the route but only when the user refreshes the page.
Example:
<div data-ng-controller="HeaderController" >
...
<span>Product Name - {{layout}}</span>
...
</div>
My header controller:
angular.module('myApp.system').controller('HeaderController', ['$scope', 'Global', '$location', '$route', function ($scope, Global, $location, $route) {
...
$scope.layout = $location.path().includes('projectEditor');
...
}]);
When you select a button it opens a page with the route: projectEditor/1. But the span only updates when you refresh the page. My plan was to use a condition on the class but it only works when the user refreshes the page.
I'm using 1.5.5 version of angular.
How can I get that scope variable in my header controller to update on change of route anyone know ?
In order to know when the location change, you should use events :
https://docs.angularjs.org/api/ngRoute/service/$route#events
The solution Depends on the implementation you are using to route your application.
Here is an example with default angular router
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
$scope.layout = 'newRoute';
}
I hope it may helps
Ok I figured it out I needed to use $routeChangeStart and update a $routeScope variable and then attach to that.
Thanks all!
I am stuck at hiding and showing the login and logout buttons at the navbar. I am setting some cookies at LoginCtrl which belongs to login.html. When user logged in I am assigning rootscope to some variables which that variable assing to ngshow/hide in And getting those cookies in HomeCtrl. What i want to achieve is when I click log in button in the login.html Login element at the nav bar has to be gone and Username element has be to show. In plunker when I add some nested states like my local and result is the same. But when i remove the nested structure and add simple two state its start working.
Working Case:
.state('home', {
templateUrl:'home.html', ===>stores the navbar html
controller: 'HomeCtrl'
})
.state('login', {
templateUrl:'login.html',
controller:'LoginCtrl'
})
Not Working Case:
.state('home', {
templateUrl:'home.html, ===>stores the navbar html
controller: 'HomeCtrl'})
.state('home.login', {
templateUrl:'home.login.html',
controller:'LoginCtrl'})
Here is plunker when you logged in login button is in place but when you rerun the app Login button is gone.
http://plnkr.co/edit/tZuvyrAUD0yCN8a3K5lF
You problem was that you put 'some' key but get 'Some'. Here is your example: plnkr.co/edit/ZsT52SYFeRVCXpGYTMqK?p=preview
I have a one page app which contains the ui.router AngularJS with multiple states links to different parts/code etc. The issue is that inside some of those state html pages I have for example a href="#tip" link that should open a modal that is part of a jQuery code; but what actually happens is that the State ends up changing and going back to my .otherwise("/") page in the state model.
I have noticed that what happens is that the link which is requested is not the correct link with the ui.router url that is currently rendering the page. For example, my app is on example.com/app .. When a state changes the url changes to example.com/app/#/page1 or page2 etc .. When a href="#" link is clicked, the link actually points to example.com/#link instead of what I assume should be example.com/#/page1/#tip or /#/tip considering the way my urls are shown..
How can I fix this to allow the href="#" tags to do and function as they originally did before being placed in states?
Below is my provider setup and a sample sate:
.config(function($stateProvider,$urlRouterProvider,$urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/app');
$urlMatcherFactoryProvider.strictMode(false)
$stateProvider
.state('flashcards', {
url: "/page1",
views: {
'input-views': {
templateUrl: '/page1.html',
}
}
})
});
Here's what I wish to achieve:
User is on url example.com/2
User goes to url example.com/2d <- this is not valid url
User is fowarded to example.com/2d/404_error
User clicks browser "back" button and lands on example.com/2
Here's what I have a problem with
User clicks browser "back" button and lands on example.com/2d
User is again automatically forwarded to example.com/2d/404_error
I have created infinite back button loop :(
In my app.config I have
.when('/:gameId/404_error', {
templateUrl: 'views/page_not_found.html'
})
.when('/:gameId', {
controller: 'game',
templateUrl: 'views/gamePage.html'
})
It is called out by app.factory when data is not fetched
}, function(response) {
// something went wrong
$location.path("/" + id + "/404_error");
return $q.reject(response.data);
});
I have tried the "otherwise" method, but using routeparams renders it useless.
You can test it out here:
http://vivule.ee/2 <- working url
http://vivule.ee/2d <- not working url
window.history.go(-2)
This method is pure javascipt you can try to use $window.history.go(-2) in angularjs
Good works!
Fixed it with ng-switch and ng-include
In the controller, when data is not loaded I added:
$scope.page_not_found = true;
And to the template I added:
<div ng-switch on="page_not_found">
<div ng-if="page_not_found" ng-include="'views/page_not_found.html'"></div>
</div>
Everything happens in one .html template. I hide the main content and import the 404 page with ng-include, this solution seems to be faster as well.