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.
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 have directive with a few nested directive inside of it. One of the directive using ng-reppeat to bind data inside ul/li list, while others directive are just a templates for basic data bind.
The problem I see while loading the page - The simple data-bind directives are loaded first so you see them at first on page, while the ng-repeat directive is being seen on page after a few mili-seconds later, so the all componenet is being flickering.
How can I deal with it? How can I tell the father directive to show all its sub-directive data-binded on the same time? I do use {{data-bind}} inside my directives.
Please advice how to avoid this kind of things on page.
you need to use ng-cloak. Add specific styles in your <head> (so they get loaded before AngularJS).
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
read more about it here
seems like you need ngCloak, see documentation
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/
I am using two visual templates for a particular site, whose css conflicts quite a bit, so rather than doing a painful edit, I figured dynamic loading would do the trick.
So I use this in my <head>
<!-- css is loaded dynamically through angular -->
<link ng-repeat="item in css.files" ng-href="{{item}}" rel="stylesheet">
And set $rootScope.css.files inside my .config() of my module.
The CSS loads fine, however there is a noticeable delay between loading the page content, and loading the CSS. Basically the unstyled html displays for a moment until the CSS files have completely loaded.
Is there any way to stop the page showing before the CSS has loaded? Is there any event for load completion of an ng-href item?
The easiest way will be to just use plain old css.
In the header of your page add this:
<style>
html, body {
display: none;
}
</style>
Then in the last css to load, undo the display none:
html, body {
display: block;
}
The latter will override the previous, and your page will appear with all of your dynamic css.
The problem here is that you're revealing the content before the CSS files have downloaded. I don't know offhand if the HTMLLinkElement object has an event for when it's loaded, but basically you need to wait for your CSS to download before revealing the content. Using ng-cloak here won't help because ng-cloak hides the content while angular is loading, not while other files are loading.
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