I'm trying to use UI-router and ui-view to inject my content into my page. But I've stumbled across a tricky scenario that I'm not sure how to handle.
My HTML looks like this:
<div class="fixed">
<nav><\nav>
<ul class="list">
<li ng-repeat="item in items"><\li>
<\ul>
<\div>
<div ui-view><\div>
The problem I'm having is that the items in the ng-repeat don't render outside of the ui-view, and I don't want to put my ui-view inside of the .fixed div, as I'd have to close that .fixed div in every view template, and the HTML begins to get real messy at that point.
Are there any better ways to handle this?
Any help is appreciated. Thanks in advance!
Related
In my index.html file I have the following code:
<body>
<div ui-view></div>
<div ng-include="footer.html"></div>
</body>
The problem is that the footer is displayed before the dynamic content related to the active state is loaded and rendered.
I tried to use the event $viewContentLoaded but this event is fired when the view content has been loaded not when it has been compiled.
I used ng-include in index.html because my footer is generic and should be used in all the app pages.
How to solve this problem?
put your angular script includes in head not at the bottom of the page.
ui-view means nothing until angular is loaded.
you might also want to use a sticky footer to prevent any issue with the footer jumping about.
stick footy for bootstrap is here ...
https://getbootstrap.com/examples/sticky-footer/
Instead of assigning url to ng-include you can bind scope variable and that scope variable value can be changed with actual URL from the directive which was reused in all your views using two way binding '='
I use the module angular-snap to adding a menu to my app like this:
<snap-content>
<div ui-view='header'></div><br/><br/>
<div ui-view='content'></div>
</snap-content>
<snap-drawer>
Menu
</snap-drawer>
And my ui-view (content):
<div class="content-padded">
<div class="">
<center><h4>Accueil</h4></center>
<!-- ... -->
</div>
</div>
My problem is I want to put a scrollable div inside my snap-content. And, I don't want the snap-content will become scrollable.
I have the following image to help you to understand what is my problem:
The three elements in the picture are in snap-content, but only the blue div have to scrollable.
Thank you in advance for your help and sorry for my bad English.
The solution I found is :
putting the snap-content "scrollable"
putting the divs I want outsdide the scroll "fixed"
putting a "top" and a "margin-top" in order to have the scroll under my others components.
If somebody have another method, it will be with pleasure.
I want to use AngularJS to apply filtering and sorting to a list of div elements, but for SEO reasons, I need this list of divs (and indeed the whole page) to have already been rendered on the page by the back end, in Velocity.
I was hoping using "track by" in the ng-repeat would let me do this by setting the ng-bind attribute on the div tag, and rendering the ng-repeat in each div, so it looks the same as when I inspect the list of divs rendered by AngularJS. both the Velocity context and the AngularJS model contain the same list of devices.
#foreach($device in $deviceList)
<div class="tile" ng-repeat="device in deviceList track by device.model" ng-bind="device.model">
<span ng-bind="device.brand">${deviceList.brand}</span>
<span ng-bind="device.model">${deviceList.brand}</span>
</div>
#end
but this just renders each item three times. Velocity renders the ng-repeated div, which itself renders for each. the track by doesn't link the identity of each Velocity-rendered div with its own contents.
any ideas?
I am quite new to AngularJS.
It looks like AngularJS can handle multi view application with ng-view.
My question is: how can I stay on the same page but make the ng-view display as inline modal box ?!
(It looks like ng-view replaces totally the original view)
Structure of the site is
<div id="mainContainer">
<div id="loginBoxModule"></div>
<div id="usersBoxModule"></div>
</div>
You should checkout Ui.Router -> https://github.com/angular-ui/ui-router
What it basically does is the following.
You create a partial that you want to load and in the index.html you can put something like:
<body>
<a ui-sref="list">Show List</a>
<div ui-view></div>
</body>
When clicking the link the partial list.html will load into the ui-view. So it will only reload the ui-view and not the whole page.
Try to use ng-include instead of ng-view. ng-view has a very specific behavior as it's hardly linked to the ui-router as Mike was mentioning.
With ng-include you can have a set of tabs at the top of the page and when you click on a tab, you just load another template (which has 1 parent div and 1 ng-controller on that div for instance).
Not sure what's your real use case though.
I have a few static html pages of content. I want to make an index page that has two div's One for a sidebar menu and one to hold content. When one of the menu links in the sidebar is clicked I want to load one of the other static html pages into the content div.
I just cant find any documentation that shows how to do this, so i'm not even sure if it's possible. Can anyone help?
You can also use ng-view to setup routes that will load your templates into your div. It's pretty straight forward, and there's a good example # https://docs.angularjs.org/api/ngRoute/directive/ngView
Use ng-include:
<ng-include
src="{string}"
[onload="{string}"]
[autoscroll="{string}"]>
</ng-include>
http://docs.angularjs.org/api/ng.directive:ngInclude