I'm on a situation where I'm using tabs from angular-material : https://material.angularjs.org/latest/demo/tabs
Let's suppose I have a tabs with 2 cols. From the second cols I call a modal in order to submit actions. when I close the modal, I use $route.reload to refresh my view. The problem is that after $route.reload , it will come back to the first col and not remain in the second call where I was.
Is there a hack to fix this situation ?
In your config:
$routeProvider.when('/mypage/tab2', {
templateUrl: '/mypage/tab2data.html',
controller: 'pageCtrl',
title: 'Add New Courses'
}
});
In your material tab:
<md-tab label="tab1e" ng-click="tab2()"></md-tab>
Now in your controller, define the function:
$scope.tab2 = function(){
$location.path('/mypage/tab2');
}
Now when you click your tab2, url will change, you'll able to bookmark it, so it won't redirect to default tab.
Related
we have more than one page each page have forms. in Page 1 When i entered some data in one form and click on submit and navigate to another page 2, in that page2 i entered data to some fields and i navigating back to page 1 and i click on submit in page 1 and navigating to page 2 in that time the fields are not cleared. i need to clear the form fields using angularjs any one please help.
We are facing issue like below
We need like this below
The problem is with the cache-view, you can disable the cache with cache-view="false" or you can clean the fields manually using the enter event $ionicView.enter.
Is up to you where to disable the cache, eg.
Disable cache within state provider
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
Disable cache with an attribute
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
If you want to clean the fields manually, you will have to do something like this in your controller:
$scope.$on('$ionicView.enter', function() {
$scope.field1 = '';
$scope.field2 = '';
$scope.field3 = '';
});
So not certain if this is possible with ui.router, but thought I would add a nice little modal that launches and says welcome to the site, give the user a chance to enter some details and so forth.
Setup is that the base view have two ui-views (mainview and menuview), and I added formview in the modal. I can get it to work so that when the modal opens it loads formview
.state('form-welcome', {
views: {
formview:
{
templateUrl: "/modals/form-welcome",
},
},
//parent:"index"
})
Didn't actually think it would work that easy, but it did, the problem is that as soon as it has loaded, it resets mainview and menuview (and as it is a modal, that means the background goes grey).
I tried to make form-welcome a child of index (the initial view), however, that breaks the whole thing. (index looks as follows)
.state('index', {
url:"/int/index",
views: {
mainview: {
templateUrl: "/pages/index",
controller: "sketchMagController"
},
menuview: {templateUrl: "/pages/top-menu"},
},
})
I can reload all three views (mainview, menuview and formview), and other than a flickering screen its not to bad. But is there a way I can limit state, so that it only changes formview but leaves the other ones alone.
Reason is that I want to change formview through five different screens, and hate flickering pages:)
It seems to me like it should be possible, but I may have missunderstood how it works
UI-router is for changing the application state, not nesting views together. For that purpose you have angular#component.
var app = angular.module('app', []);
app.component('myModal', {
template: '<div ng-show="isShowing">Hello User</div>',
controller: 'modalCtrl'
});
app.controller('modalCtrl', ['$scope', 'modalService', function($scope, modalService) {
//Save showing state in a service (default to false) so you don't popup your modal everytime user visit homepage
$scope.isShowing = modalService.getShowStatus();
$scope.pressButton = function() {
$scope.isShowing = false;
modalService.setShowStatus(false);
}
});
Then using ui-router, declare your index state, with its template as follow
<-- INDEX.HTML -->
<my-modal></my-modal>
<div ui-view='mainview'></div>
<div ui-view='menuview'></div>
The power of ui-router is the ability to replace the ui-views by different template each different state
stateIndex: abstract
stateIndex.stateA: mainview: /home.html
stateIndex.stateB: mainview: /information.html
So ask yourself, will menuview gonna change to different templates in future states? If not, make it a component.
I would try a different approach, and not having this "welcome" modal part of UI router. It doesn't sounds it should be a "state" in an app, where you can navigate to etc.
I would just pop up this welcome modal after your app finished to bootstrap (e.g. in your run() method or after w/e logic you have to start your app), based on your business logic (e.g. show it only one time).
Why not try $uibModal, part of ui-bootstrap? https://angular-ui.github.io/bootstrap/
It sounds like its everything you need, It pretty much has its own state (includes its own view and controller) so piping data in is easy. You can even pass on data captured within the modal with a simple result.then(function(){} . We use it at work and it doesn't reload the state its on.
You'll probably just want to have it be a function that runs automatically in your controller. If you want to limit how often it pops up you can even have some logic for determining when it pops up in the resolve, pass it to your controller and open the modal based on the resolve.
I think the best way to accomplish what you want is to listen on state changed event and fire the modal. The idea is you fire the welcome modal when the first view is opened and then you set variable in localStorage or some service (depends what you want to achive). Here is an example
$rootScope.$on(['$stateChangeSuccess', function(){
var welcomeModalFired = localStorage.get('welcomeModalFired');
if(!welcomeModalFired) {
//fire modal
localStorage.set('welcomeModalFired', true);
}
})
I've been aggressively working on an app that uses AngularJS and Bootstrap. To help, I've included the Bootstrap UI framework. I am successfully opening a dialog and closing the dialog. However, I'm not sure how to actually "get" the data when a user clicks "Save Item".
My Plunker is Here
As shown in the Plunker above, I have my controller defined like this:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm',
controller: function($scope, $modalInstance) {
$scope.saveItem = function () {
alert('Saving...');
alert('ID: ' + $scope.newItem.typeId);
alert('Data: ' + $scope.newItem.data);
};
$scope.cancelItem = function() {
$modalInstance.close(false);
};
}
});
When I go to show the id of the item the user selected, and the text the user entered, it doesn't work. newItem is undefined. However, in the markup, you can see ng-model="newItem.data"
How do I get the information that the user entered in my controller?
Thank you!
You are not passing the result back to the controller opening the modal when you close it, you just need to add this in the modal's controller:
$modalInstance.close($scope.newItem);
See plunk.
Another thing: I've found that if you do not manually initialize objects on the $scope of the modal controllers of angular ui, they do not get bound properly, hence the $scope.newItem={} in the controller of the modal.
I have created a basic app with tabs. I have two tabs in my app, NEW and DISPLAY.
When I'm in the NEW tab, I redirect to an item in the DISPLAY tab: #/tab/display/1
Then when I click DISPLAY tab, or if I click NEW tab and then DISPLAY tab again, that same item page is shown - and the DISPLAY tab is using the DisplayItemCtrl instead of DisplayCtrl. With other words, I cannot get back to the original DISPLAY page (#/tab/display).
Is there a way to clear the history or some other way to fix this?
If I first visit the DISPLAY tab page before I go to the NEW tab page to create an item, it works, as if the route is cached, but if I don't visit the DISPLAY page when I start the app and create a new item, it will not work.
These are my states:
.state('tab.new', {
url: '/new',
views: {
'tab-new': {
templateUrl: 'templates/tab-new.html',
controller: 'NewCtrl'
}
}
})
.state('tab.display', {
url: '/display',
views: {
'tab-display': {
templateUrl: 'templates/tab-display.html',
controller: 'DisplayCtrl'
}
}
})
.state('tab.display-item', {
url: '/display/:id',
views: {
'tab-display': {
templateUrl: 'templates/display-item.html',
controller: 'DisplayItemCtrl'
}
}
})
I created a simple tabs app on codepen just to show the problem. http://codepen.io/anon/pen/GInjq First go to Dash, and click "Redirect to a friend". After that it will be impossible to reach the Friends tab start page.
This is an old post, but I still found a workaround, if someone has this issue look at my question.
Consists in putting ng-click="onTabSelected()" in the tab, and in the controller assigned to the tabs:
$scope.onTabSelected = function () {
$state.go("tab.home");
}
That way, always the tab is touched it will lead to the state I want, not the first shown or whatever, I hope it's useful for someone, the behaviour that gave the problem really looks like a bug in ionic.
Did you try state redirection from your tab?
For ex:
<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tab.display">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
see documentation
http://ionicframework.com/docs/api/directive/ionTab/
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
create a function, onTabSelected that is called when the tab is clicked so that the ui-router doesnt manage it
I've got ngClick directives on the anchors tags inside my main navigation, to make the menu "disappear" off canvas after clicking it:
<a href="/#/profile" ng-click="showNav = false">
It's functioning all right. However, I recently noticed an error (in the console) that occurs when I'm changing view through those anchor tags:
Infinite $digest
Loop error in component $rootScope
This is how I handles my routes:
$routeProvider.when('/register', {
templateUrl: 'assets/templates/register.html',
controller: 'RegistrationController'
});
Is this because I change view at the same time as I'm setting "showNav" to false? Is this even the right way to go with this?
If you just want menu to disappear - you stay href empty. If you need moving to new controller then set showNav = false in profile controller. So I mean you need something one - either ng-click or href, not both.
tie the showing and hiding of your anchor tag to the url not the user clicking i.e.:
<a ng-if="location.path() != '/profile' href="/#/profile"></a>
in your controller:
function mycontroller($scope,$location) {
$scope.location = $location;
}