i have a big problem. I'm working on a side menu app, and i need to open another view from another view. I tried to use $state.go and $location.go but when i open a window, this window have the back button of the navigation bar. I want the window will open like when i click on a item on my menu, so with the sidemenu icon on left of the nav-bar. What is the method to open a "new window"?
when i open the new view with AngularJS $state.go and $location.path:
1
when i open the same with href="url" in my HTML sidemenu :
2
I need to open the new view like the second screenshot using angularJS. How can i hit it?
If you don't need navigation back button (eventually on condition) you can use this code in your index.html:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{options.hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
When you need to hide the back button set options.hideBackButton = false;
Another way is to use: $ionicNavBarDelegate.showBackButton(false);
Related
I need to keep a menu open when changing url. Right now if I click on View File or Diff the menu hides because the url will have a different path (/files , /diff).
Is there any way to prevent the menu from hiding when the url is changed?
This is my code:
Click to toggle menu
<div ng-show="collapsed">
<div class=container" ng-controller="MenuController" ng-show="show_menu()" ng-init="init_file_ids(number_of_files, selected_files)">
View File |
Diff |
Import |
Toggle chart
</div>
</div>
you want to make sure that collapsed variable is always set false when the pages are initiated. probably you can do that through controllers or from menu's directive controller.
I have just started learning AngularJS and have created a header using md-toolbar. I have 3 buttons (Home, About and Enquiries) Each button has a tooltip that displays when hovered over. The 'Enquiries' button opens a sidenav. However, when I close the sidenav the 'Enquiries' button tooltip redisplays and does not fadeout. If I move the sidenav function call to the 'About' button, the same thing happens. It looks like the button that opened the sidenav will have it's tooltip redisplayed when the sidenav that it opened is closed. Any ideas on a solution please?
I have the following code that opens up a pop up and displays information returned by the function //showDetails(Data.path)// when we click on the icon.
<a ng-show="Data.path" ng-click="showDetails(Data.path)">
<ng-md-icon icon="info" style="fill: green" size="15"></ng-md-icon>
</a>
I want the data to appear in a md-dialog modal window. Is there an easy way to do that ?
You have to setup a controller which tells $mdDialog what it needs to do when the showDetails(...) function is triggered.
See: https://material.angularjs.org/latest/demo/dialog (Click "View Source" <> icon, and then switch to the "JS" tab to see an example of controller code to use; or just go straight to the Codepen).
If you are using ng-include for your modal, remember Angular creates a new child scope for it. You can acess the data in the modal using the following in your modal HTML:
{{$parent.Data.path}}
I'm using Ionic directives as generated by Ionic Creator. At the top we have a standard nav-bar and tabbed navigation icons at the bottom. Each icon has a specific color and I want the navbar to match the color when clicked.
<ion-nav-bar class="bar-{{$root.color}}">
Firing on-select, I've tried to set $scope.color, $rootScope.color, and even created a function that returns the value of $rootScope.color.
<ion-tab title="Reps" icon="ion-person-stalker balanced" on-select="headerColor('balanced')">
With the code above, the css changes in the inspector but the new color is never applied or rendered. Anyone know a good way to work this in? I've also tried to $scope.$apply() but that just throws errors as other $digests are running.
Here's the app link
https://irthos.github.io/medviz-admin/#/labs
Here's the index.html with the code
https://github.com/irthos/medviz-admin/blob/master/www/index.html
Thanks!
This can be achieved by changing the color when switching states. I created a codepen that does just that:
http://codepen.io/cavanflynn/pen/VLBgEK
<ion-nav-bar class="bar-positive"
ng-class="{'bar-custom': secColor == '1',
'bar-custom2' : secColor == '2'}">
</ion-nav-bar>
<ons-sliding-menu var="slidingMenu" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="overlay" side="left" swipable ="true"></ons-sliding-menu>
My sliding menu structure is above. The slide menu is working fine like opening and closing, on clicking the Button.
But my issue is, need to close the sliding menu on clicking outside of menu or on clicking the main-page(index.html)
I would like to know, is there an option available or any work around is available.
Thanks in advance
Yeah it would be nice to close the menu by clicking outside.
You can use the 'postopen' event for the Sliding Menu to attach a click handler to the main page. In the click handler you can call slidingMenu.close(). It's also important to remove the click handler, otherwise you won't we able to open the menu again.
Code:
ons.ready(function() {
slidingMenu.on('postopen', function() {
var main = slidingMenu._element[0].
querySelector('.onsen-sliding-menu__above').children[0],
el = angular.element(main);
el.on('click', function() {
slidingMenu.close();
el.off('click');
})
});
});
The following pen shows how it can be used:
http://codepen.io/argelius/pen/jENKeX
Since it's a nice behavior I think it will be added in the next version.
Regards