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 '='
Related
I have been supplied a bunch of html that I need to integrate with data supplied from my web api. I'm using Angular and page navigation is being handled with the Angular-ui router.
My problem is that the code I have to work with contains lots of anchors like this
<heading class="pageheader">
Scroll Down
... bunch of stuff
</heading>
<div id="step1">
... more stuff
</div>
my problem is that instead of triggering the javascript that scrolls the page down to the data entry stuff in the step1 div, a click on the link refreshes the page so I end up back at the home page view.
So I worked out that if do this
<heading class="pageheader">
<a ui-sref="state" href="#step1" class="link-scroll">Scroll Down</a>
... bunch of stuff
</heading>
I stay in my current view, but the javascript that should get triggered to scroll the page down to step1 never gets called.... any ideas for an easy way to do this?
I can work round it by changing the anchor to a div and handling the click in my angular controller, but there are lots of these in the html I have to work with.
It appears that there is some support for anchorScrolling in ui-router.
According to the aforementioned link:
A small service that handles the scrolling behind the scenes for the
autoscroll attribute directive. You can also use it if you'd like.
When called with a jqLite element, it scrolls the element into view
(after a $timeout so the DOM has time to refresh). If you prefer to
rely on anchorScroll to scroll the view to the anchor, this can be
enabled by calling $uiViewScrollProvider.useAnchorScroll().
According to this link also, autoscroll is an option as well. (Exmples from docs).
<!-- If autoscroll unspecified, then scroll ui-view into view
(Note: this default behavior is under review and may be reversed) -->
<ui-view/>
<!-- If autoscroll present with no expression,
then scroll ui-view into view -->
<ui-view autoscroll/>
<!-- If autoscroll present with valid expression,
then scroll ui-view into view if expression evaluates to true -->
<ui-view autoscroll='true'/>
<ui-view autoscroll='false'/>
<ui-view autoscroll='scopeVariable'/>
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!
I have an index that serves a static header menu, and below that an ng-view that based on route, selects the right template. Like this for example:
<navbar>
...
</navbar>
<div ng-view>
</div>
Everything is good so far, when a specific route is hit, a template is loaded in that container with the associated controller.
Now, I have another page that is loaded inside ng-view, and it's fired when url "/dashboard" is hit. The problem is that the dashboard page, has a sidebar menu that also needs to contain some routing logic (more or less). When a link has been clicked from the sidebar menu, I have to load only the left hand side of the page (not the whole ng-view container).
I have identified two solutions:
1) Create a directive that stores that sidebar menu, and inject it in all of the pages that are handled by the sidebar menu ==> routing is still handled by ng-view.
2) Use ng-include and have some routing logic in the dashboard page like this:
<a ng-click="templateType = 1">Template 1</a>
<a ng-click="templateType = 2">Template 1</a>
<div ng-if="templateType === 1" ng-include="template1"
ng-controller="Template1Controller"></div>
<div ng-if="templateType === 2" ng-include="template2"
ng-controller="Template2Controller"></div>
Is there another approach? Or what is the best practice in handling both a sidebar that handles some routes, and a static menu that handles another routes, with the mention that the sidebar menu is only available on some of the routes.
I have provided a paint drawing, in the hope that I can explain my problem better.
You can use UI-Router and give a shot at nested views. Here is a really good tutorial. I think what you're trying to achieve is mentioned at the end of the tutorial.
As all others have suggested you need to go for UI-router and nested views. It is great way to set up your page layout.
You can find the answer in
Angular UI-Router How to create a "layout" state?
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