I'm trying to animate between two divs when the route changes.
So far it works fine using ng-show and ngAnimate, but the second div contains the ng-view, which immediately disappears once the route changes. How do I wait until the ng-show animation completes before removing the ng-view from the DOM?
Live demo:
http://run.plnkr.co/7RLwUxwfUV4rb2kV/#/
Sample code: http://plnkr.co/edit/0ZatzKRKAyxUUfgslxum?p=preview
You are only animating ng-show in your CSS, but you're not animating when ng-view switches content. You animate ng-view with the .ng-enter and .ng-leave css classes. You can see an example here: http://dfsq.github.io/ngView-animation-effects/app/
Related
I am using $anchorscroller and location hash for scroll down to each section.
It is working correctly. But if any div having ng-if condition, then this anchor scroll is not working.
For example,
<div id="Mrgr" ng-if="mgrlist.length>0">
<p>test</p>
</div>
In angular, I am using the below code:
$location.hash("Mrgr");
$anchorScroll();
If I remove the ng-if then this scrolling working fine.
Any one have any solution to fix this?
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 am using the MD-Slider with the md-discrete option to display the ticks on the track.
Strangely though the ticks of the slider within a directive template are not displayed. But outside the directive it works.
I have added a screenshot to show you. See the JADE code for this example:
div.sliding-footer-panel(ng-class="{ open: openFooter}" layout="column")
div.trigger(layout="column" layout-align="center center" ng-click="openFooter=!openFooter")
md-icon(ng-hide="openFooter" md-svg-icon="hardware:ic_keyboard_arrow_up_24px")
md-icon(ng-show="openFooter" md-svg-icon="hardware:ic_keyboard_arrow_down_24px")
md-slider.md-primary(md-discrete flex min="-0.5" max="4" step="0.5" aria-label="Change play rate")
div.footerContent(layout="column" flex)
audio-player
The directive audio-player loads the <audio> tag and the slider next to it.
The slide above the footerContent div is rendered correctly in the main view and renders the dots.
When I look at the canvas tag within the track element I see that its dimensions are 0. The one loaded outside the directive has normal dimensions.
So I recon the CANVAS tag is not loaded correctly via the directive. Anyone an idea how to fix this?
I'm trying to use angular ui router with core-animated-pages. Right now I'm stuck because if I include the ui-views inside the sections of a core-animated-pages element, and all of that is inside a <template is="auto-binding"> element, then the transition works but angular does not fill the ui-views. I think it because the template makes it all part of the shadow dom.
Here's a plunkr: http://plnkr.co/edit/tYyuKLO1O5JQVtpNg9Th?p=preview
Thanks.
I was wrong - you don't have to use template.
And here's how you do it!
https://github.com/morgs32/angular-polymer
I have a menu that slides when some button is cliked, but at beginning this menu is hidden, something like that:
<div ng-show="menuShow">
my menu here...
</div>
The issue is when the page is loaded the menu is not hidden (probably because the ngShow directive wasn't loaded) and then they disappears (probably because the ngShow directive was loaded) and making a strange "blink effect" with the menu.
What is the best way to deal with this issue??
The quickest and simplest thing to do would be to add the ngCloak directive to the element.
<div ng-show="menuShow" ng-cloak>
my menu here...
</div>
As long as Angular is loaded synchronously in the head section of the document, this should prevent the flicker.
If you're not loading Angular synchronously, then according to the docs, you could manually add the CSS to the page:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
And if this isn't possible for some reason, you can you just have all the Angular content not in the page on initial load, but included by an ng-include, ng-view or ui-view directive, or custom directive that includes its own template. (This is how I do it, but more for structural reasons)
I couldn't get ng-cloak to work, even when applying the CSS rules, so I ended up using ng-if.
https://docs.angularjs.org/api/ng/directive/ngIf
It results in a bit more overhead as Angular will actually remove the object from the DOM and reload it every time the value of ng-if changes, but in my case this was not very frequent and the overhead was not noticeable.