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();
Related
This HTML button code is in controller:
On click of a button, trying to call this function:
<button ng-click="vm.openpopup()" ng-if="!vm.data.length"
uib-tooltip="Add Business Value Chain"
class="btn btn-default `enter code here`ti-form-action-btn" id="add-bvc-btn">
<em class="glyphicon glyphicon-plus-sign"></em>
Add
</button>
function openpopup() {
$scope.$broadcast('popup');
}
Below is the broadcast listener code which is inside component under the same controller mentioned above:
$scope.$on('popup', function () {
openModalPopup();
});
The button is displayed only when there is no data present.
Function call is absolutely fine, but broadcast works only once if there is data and if those data are deleted manually, then button gets displayed and broadcast works. But for on page load, if no data present. Broadcast not getting triggered.
Tried using $rootScope.broadcast, still no luck.
Also checking with some other answers, binded the block of code inside $timeout, still no results.
So this is a communication between controller and component using broadcast. How to handle this on load?
I think the issue in your case you have controlled the visibility of your button with ng-if, try it using ng-show instead of ng-if. In case of ng-if there is a chance that the template not to load. I hope that will solve your problem.
In a mean-stack web application with html5mode, I have defined the following angular-ui-router
.state('addinHome', {
url: '/addin/home',
template: "home page"
})
Then, I have another page https://localhost:3000/test/ with a button button. Also in its controller, I have
... ...
$location.path("/addin/home")
... ...
Normally, both $location.path and the button lead to https://localhost:3000/addin/home.
Now, I add the following references in index.html:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
It disturbs the ui-router. As a consequence, both $location.path and the button lead to https://localhost:3000/test/#%2Faddin#%2Fhome, which is NOT what I want.
I have found the solution to fix the button: it is using button (opens the linked document in the same frame as it was clicked; see here).
However, I have not found the solution to fix $location.path("/addin/home"). Could anyone help?
Inject $window as dependency.
Try using $window.open(URL,"_self")
I have a dynamic tabs page in my Ionic2 app that looks like this:
<ion-tabs #myTabs class="tabs-md" type="md" [tabsHighlight]="true" [selectedIndex]="mySelectedIndex">
<ion-tab *ngFor="let tab of tabRoots" [root]="tab.page" [tabTitle]="tab.name" [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>
When the user taps on a tab that is already selected and is therefore the root page already, the page will still reload. The issue is that I have a few custom animations that rerun when this happens. So I want to disable the ability to navigate to your same root page.
I've tried putting
ionViewCanLeave() {
return //viewchild of #myTabs and returns true if next page does not equal current page.
}
This worked in that it stopped the refresh of the current root page, but the app crashes when navigating to another page that isnt a root (a child page) because myTabs reference is undefined.
Any advice on how to accomplish this? I would prefer to handle this from my tabs controller.
Try : ionSelected() {
// DO SOMETHING OR NOT
}
In your 'HomePage' for example.
Links : https://forum.ionicframework.com/t/capturing-ion-tab-click-on-active-tab-event/56594/27
I Hope I could help you.
This was caused by a bug in ionic which was fixed in version 3.0.1
https://github.com/ionic-team/ionic/pull/11084
I am really struggling with the issue with custom directive component. I have created TreeView dropdown component based on Angular ivh-treeview angular-ivh-treeview. Becasue ivh-treeview by default does not have recommended functionality and stylig I have extend it. But now I am facing an issue I haven't seen before and I would be really thankful for your help. The component works absolutelly OK in the modal. When you click on the checkboxes it reacts pretty fast and everything looks great. But when I use the same component on any other page (not in the modal) it has really strange behavior. When you select any checkbox, it does not update immediatelly, you have to click somewhere else on the page, or close and open dropdown to see changes. I have no clue what is going on there and why the same component works in the modal. Maybe it's because modalInstance has different scope but I am done.
Here you can see and play with an example (Page 1 - modal, Page 2 - no modal): DEMO
This is just a fragment of the code I had to include to be able to link here DEMO on Plunkr
<ivh-dropdown ivh-model="treeStructureFinal" selected-array="formData.casinos" is-disabled="inReadMode" placeholder="Select casinos"></ivh-dropdown>
Thank you everyone!
When this kind of thing happens I always think about $scope.$apply().
So I did a minor modification and now the directive works fine, just by adding a scope.$apply at the end of the click handler:
$document.bind('click', function (event) {
var isClickedElementChildOfPopup = element.find(
event.target).length > 0;
if (!isClickedElementChildOfPopup
&& element[0].children[1].classList.contains("show")) {
element[0].children[1].classList.toggle("show");
}
scope.$apply();
});
Take a look at it working:
https://plnkr.co/edit/s1UNCXNCZ46zXjte9lpZ?p=preview
Hope that helps.
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!