i'm working with Ionic Framework and i've the next problem.
I have 3 views templates: one.html, two.html, three.html, and one.html is the home of the application (no back button)
The navigation is correct between the views but i have problems if navigate from three.html to one.html because when navigate to one.html in navbar appears the back button and i need one.html identical as app start state
I navigate with $state.go('tab.one.html');
Thanks.
You could use the nav-clear directive to do this (source)
or implement the code directly in your controller:
$ionicViewService.nextViewOptions({
disableAnimate: true,
disableBack: true
});
Related
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
I have my home page in the root directory, Home.html.
I then have my App folder setup like this.
App - > Equipment->Equipment.html
My ui-router setup is this.
$locationProvider.html5Mode({ enabled: true, requireBase: false});
$urlRouterProvider.otherwise("/Home");
$stateProvider
.state('Home',{
url:"/Home",
templateUrl:'./App/Home/HomePart.html'
.state('Equipment',{
url:"/EquipmentBuilder",
templateUrl:'./App/Equipment/Equipment.html',
controller: 'EquipCtrl'
});
Everything seems to work fine, until i go to the equipment page, and refresh manually... It then tries to go to Localhost/Equipment.html. Rather than keep the route, which would really be .App/Equipment/Equipment.html.
All im doing on the homepage is showing the view
<div ui-view></div>
Why is it that it doesn't refresh the state, but rather tries to go to a page that does not exist.
Cant seem to find a solution to the refresh issue. People can't bookmark the page either, because it tries to bookmark LocalHost/Equipment, which doesn't exist.
This is a phonegap + angularjs project. Let say i am on this page
file:///android_asset/www/index.html#/groupHome"
Now i got a notification and i am changing hash as below on clicking notification:
window.location.hash= "/groupHome?groupId=xyz";
If am on any page except file:///android_asset/www/index.html#/groupHome" navigation happening correctly but if i am on file:///android_asset/www/index.html#/groupHome" page its not navigating
$stateProvider
.state('groupHome', {
url: "/groupHome",
templateUrl: "groupHome.html"
})
Here is redirection
if(window.location.hash.indexOf("/groupHome")>-1)
{
angular.element("[ng-controller =groupHomeController]").injector().invoke(['$state',function($state) {
$state.reload("/groupHome?groupId="+msg.extraParam.groupId);
}]);
}
else
window.location.hash="/"+msg.extraParam._nextPage+"?groupId="+msg.extraParam.groupId;
Use Angular UI-Router
for navigation from one view to other views smoothly
Disclaimer I am not looking for a simple parent/child ui-router relationship
I am looking for a solution where I am on one page and I can change to any arbitrary state without removing the contents/listeners of the previous state.
Use Case:
User is on a splash page
clicks on login modal
Url changes from /splash to /login
New modal opens up, the splash page contents in the background do not disappear
The idea is that I wouldn't need to be on any specific child state to have this work.
You can do this with UI-Router Extras "Sticky States".
Here is the UI-Router Extras modal demo: http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/
Add UI-Router Extras:
<script src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>
var app = angular.module('plunker', ['ui.router', 'ct.ui.router.extras', 'ui.bootstrap']);
Add a named ui-view for the app and one for the modal
<body>
<div ui-view="app"></div>
<div ui-view="modal"></div>
</body>
Mark your app state as sticky. The effect is that you can navigate from any app.* state to the modal state... instead of exiting that state, it will only "inactivate" it, and it remains in the DOM.
$stateProvider
.state("app", {
template: "<div ui-view></div>",
sticky: true,
You can't be on many states at once. Modals have their own scope, to which you can pass your own stuff and usually modals are not associated with a state switch.
Reconsider that a modal should require a state switch
Modals have their own scope, destroying which doesn't affect the scope of the place from where they were called in any way.
Hello here is my scenario.
I have these routes
routes: {
"": "show_group_list",
"!/group/:_id/": "show_group",
},
and here is my navigate function:
App.app.navigate('!/group/'+group.get('_id')+'/', { trigger: true });
when the function is triggered, on the address bar it shows localhost/group/1 instead of localhost/#!/group/1. The problem is that when I refresh the page I don't get the initial page anymore (mine is a single page app)
How can I hack navigate() so that it keeps the hashtag?
Ok, This was easy, I had pushState enabled. Disable pushState and you'll have back the hash