i have this html structure and i use angular-snap module:
<div snap-drawer id="menu">
profile
<hr/>
cart
</div>
<div snap-content>
<div ng-view></div>
</div>
When I click on one of the links in the snap-drawer, snap-content correctly loads the page but the snap-drawer will not close.
How can I close it? if you use the directive 'snap-close' on the link, the snap-drawer closes but the snap content does not load page.
Thanks
Snap.js Side Panel Default To Open? helped me with the same problem; try
<div snap-content style="-webkit-transformk: translate3d(266px, 0px, 0px);">
<div ng-view></div>
</div>
I think this works because default snap maxPosition is 266.
Related
I'm creating an application that provides a logged in user with the ability to create a poll (with questions and choices) in their dashboard.
Once the poll has been created I would like to redirect to the poll page, which will have a unique url (ex: http://example.com/p/3eRr4g6).
I would like this page to NOT use the dashboard template.
How does one accomplish this?
Here's my dashboard view:
Example Poll Page/Template:
UPDATE: To show my current index file and how I have it structured. (In reply to koox00's response)
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<div ng-include="'components/navbar/navbar.html'"></div>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div class="content-wrapper">
<div ui-view></div>
</div>
<div ng-include="'components/footer/footer.html'"></div>
</div>
</body>
You can use named views.
Create a state that loads the default template in that view e.g main and make every other state a child of this one if you want to share data.
In the desired state you can load over the main view the html you want.
update
default.html
<div class="wrapper">
<div ng-include="'components/navbar/navbar.html'"></div>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div class="content-wrapper">
<div ui-view></div>
</div>
<div ng-include="'components/footer/footer.html'"></div>
</div>
index.html
<body>
<div ui-view="main"></div>
</body>
take a look at nested states also if you want to share data between states parent/child.
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I have a bootstrap modal given below, which is inside an angular contoller registrationCtrl, which pops up if re-registration is attempted. There is a LOGIN link at the footer of modal, however when I click the link, only the url in browser's addressbar changes. But the page does not navigate to /login, as it is supposed to.
<div class="modals">
<div id="registered" tabindex="-1" role="dialog" aria-labelledby="registeredModal" aria-hidden="true" class="modal fade">
<div class="modal_container">
<div id="modal-head"><span>Already Registered</span></div>
<div class="modal_body">
...
</div>
<div class="modal_footer">
<div id="notice"><span>*Please login to continue or cancel to register with different </span></div>
<div class="buttons button-toolbar">
<div class="login btn-vert-block">
<span>LOGIN</span>
<div class="cancel btn-vert-block"> <!--the link that is not working-->
<span>
<button type="button" data-dismiss="modal">CANCEL</button>
</span>
</div>
</div>
</div>
</div>
The modal works perfectly when used as an independent html. What am I missing here?
The link problem was in whole html page and not exclusive to the modal. I found out the problem arose from setting the html5Mode to true:
angular.module("MyAPP",[],function($locationProvider){
$locationProvider.html5Mode(true);
});
The link navigates if we put target='_self' in the anchor tag. I found the solution from here. But I couldnt find the actual reason and explanation. If someone can give me the explanation that would be great help, as I am an angular beginner.
How can i remove navigator toolbar from top on single page index.html, but i want ons.navigator.pushPage functionality for some button on index.html is it possible?
It can be achieved by hide-toolbar="true" on index page and get back false on page1 , but after move to page1, i am not able to view left button on top header, and ons.navigator.popPage() is also not working on my button.
You can vanish navigation bar by
index.html
<ons-navigator page="foo.html" hide-toolbar=true></ons-navigator>
http://onsenui.io/guide/components.html#navigator
And in order to display ons-navigator html on next.html, write this in foo,html
foo.html
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Navigation Bar</h1>
</div>
</div>
<br><br><br>
<div class="topcoat-navigation-bar topcoat-navigation-bar--bottom">
<div class="topcoat-navigation-bar__line-height" style="text-align:center">Bottom Toolbar</div>
</div>
http://onsenui.io/themes/#navigation-bar
I am trying to add a switch to my partial view, it works as long as I am not switching the views using the ng-include. any idea why its breaking?
example in the plnkr code
basically this is what i am doing there:
<div ng-app="myApp">
<div ng-controller="RootController">
{{MyText}} : {{subview}}
<button ng-click="SelectAdmin()">Administration</button>
<button ng-click="SelectOperation()">Operations[Breaks!]</button>
<br/>
<div ng-switch="subview">
<div ng-switch-when="operations">
<div ng-include src="'./_partial.htm'"></div>
</div>
<div ng-switch-when="administration">
SHOWING :{{subview}}
<div class="make-switch switch-large">
<input type="checkbox" checked="" />
</div>
</div>
</div>
</div>
</div>
EDIT 1
To describe the issue a bit more:
When I start the page, I show the div that is not in the partial. i,e, set the subview = admionistrator and see an views as below.
now when i click on the "Operations" button i switch the view but use ng-include to load the partial view. and the partial view is actually showing the same content, but the view is messed up as seen in the image below.
Now even when i switch back to the earlier view by clicking on the Administrator button the make-switch is still broken.