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'/>
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 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?
When creating, for example, dropdown menus I use the # sign on the link that toggles the dropdown. It works just fine with just for that and many other things where I need a link just to do something and stay on the same page.
Now I'm using angular and the problem I face is that when I use this sign on a link it thinks I'm referencing the route for / so that the app goes to the first screen.
How can I deal with this?
As far as I know another "ugly" workaround is to put href="javascript:;" to avoid the unintended navigation.
Or remove the href altogether but then when you mouseover you have no pointer. you need to add this to your CSS as described on UI Bootstrap page.
From: http://angular-ui.github.io/bootstrap/
Original Bootstrap's CSS depends on empty href attributes to style
cursors for several components (pagination, tabs etc.). But in
AngularJS adding empty href attributes to link tags will cause
unwanted route changes. This is why we need to remove empty href
attributes from directive templates and as a result styling is not
applied correctly. The remedy is simple, just add the following
styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview
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