I'm using AngularJS for my hybrid Ionic app.
My controller:
.controller('SubmitCtrl', function($scope) {
console.log("this just work for only refreshing the page!);
});
Only for each refreshing the page, console.log works fine, but when I switch to other states, and came back to submit state (without refreshing the page), console.log doesn't work.
Any idea?
it is bcoz Ionic cache your page.
Try this
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
or,
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
Source: http://ionicframework.com/docs/api/directive/ionNavView/
Though #Ved has answered this question perfectly, disable ionic view cache is not a graceful resolution. If you just want some parts of a page controller to be executed whenever you enter this page, maybe you should make use of ionic view lifecycle:
.controller('SubmitCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function() {
//code in this block will be executed every time before you enter in
console.log("this just work for only refreshing the page!);
});
});
More information about ionic view lifecycle, please refer http://www.gajotres.net/understanding-ionic-view-lifecycle/ and http://ionicframework.com/docs/api/directive/ionView/. Hope this will help, regards!
Related
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;
};
})
I have a webview template which loads data from a link. So, if I have to load a separate webview I use the same template and controller and change the link. It works fine for most cases. However, if I try to load a different webview from the current one it does not work. The reason is that the controller is not triggered again as we are loading the same view. I tried navigating a different page and then moving to webview template, however the result is the same the controller is not initialised. How can I trigger the controller or have the controller reload?
I tried setting cache to false globally and setting reload to true however it still does not reload the controller.
Here is how my code looks
.state('webView', {
url: '/webView',
cache: false,
templateUrl: 'templates/webView.html',
controller: 'WebViewCtrl',
reload: true
});
I have also set
$ionicConfigProvider.views.maxCache(0);
However, my controller still refuses to reload. Any ideas on what am missing?
Finally ended up using state transition mentioned in this link - https://github.com/angular-ui/ui-router/issues/582.
$state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true });
This did the trick for me and reloaded my view and the controller.
I have a simple App built with Ionic/Cordova. In each page I want to create a simple "Go Back" block button - the user can press it to go to the previous page in the App.
I'm thinking of doing this using $ionicHistory. However, the method $ionicHistory.goBack() is not working.
I am currently using the usual window.history.back() instead, which works, but I don't understand why the ionic method is not working like it should.
Here is the view of the code:
<button class="button button-block button-assertive" ng-click="goBackHandler()">
Go Back
</button>
And here is the Controller:
angular.module('starter.controllers', ['ionic'])
.controller('AppCtrl', function($scope, $ionicHistory)
{
$scope.goBackHandler = function()
{
$ionicHistory.goBack(); //This doesn't work
//window.history.back(); //This works
//alert('code to go back called. Did it work?'); //For testing
}
});
This should be pretty straight-forward. What could I be missing?
Edit: Plunker here - http://plnkr.co/yJqdfs
$ionicHistory.goBack() works only when you have routing and when you navigate to another screen using $state.go('testPage').
In the plunker you've
Go to Test Page
Which is a general browser redirection, which IonicHistory can't help you.
Ionic History will work based on the states stack it has.
Because when you redirect using href="test.html", there will be NO state pushed to Ionic History, so $ionicHistory.goBack() couldn't find any back state.
Please use this one. This works for me.
window.history.back();
I have an Ionic app where I want the controller to reload whenever a user visits a tab. I have the following link here...
<ion-tab icon-off="ion-ios-person-outline" icon-on="ion-ios-person" ui-sref="tab.profile({reload: true})">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
If I visit the tab link once, the controller loads(obviously). If I leave the page and click that same link again the page does not reload. The way I'm detecting this page reload by injecting a console.log into the controller file.
angular.module('coolsite.user')
.controller('ProfileController', profileController)
profileController.$inject = [];
function profileController( ) {
var vm = this;
console.log("activated");
}
How do I reload the controller every time the user clicks on the link?
You should use transitionTo to reload your controller & route.
Markup
<ion-tab icon-off="ion-ios-person-outline" icon-on="ion-ios-person" ng-click="vm.redirect('tab.profile')">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
Controller
vm.redirect = function(stateName){
$state.transitionTo(stateName, {} , {
reload: true,
inherit: false,
notify: true
});
}
Update
Though it was not related to angular-ui-router Its specifically related to ionic-view, they getting cached by default. You need can disable those caching by state just by mentioning cache: false.
Code
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tabs/profile.html',
controller: 'ProfileController as profile',
reload: true
}
},
cache: false
})
There are also two alternative way to achieve this, you can find it in this answer with better explanation which is given by me only
So, I think what you're really looking to do is not use the cache. That means that in your state, you'll want to set cache: false. To be clear, controllers are not "reloaded." The scope is simple removed and re-added when you return to the page, unless you set the cache to false.
I don't think that's necessarily the best approach though. I would use the events in the navigation lifecycle and set up a handler for $ionicView.loaded instead. You can find details about the event for ion-view in the doc under the section: View LifeCycle and Events.
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.