My problem is that when I use ng-cloak in pages that include elements which make use of directives with template code, ng-cloak does not wait for this template code to load and the page is shown incrementally and not as a whole (page elements first and after a while template code pops out).
I have tried to make a custom ng-cloak directive so that it won't remove element's ng-cloak class while any child element contains ng-cloak class but with no success. I thought this one would be a common issue, but I have not managed to find a solution online. Any help appreciated!
I don't think ngCloack was designed to cloak your content until everything is loaded. It is designed to prevent your content to be rendered in its raw form, what with expressions and all.
However, according to the documentation, it might work on the body element, but I haven't verified it myself:
The directive can be applied to the <body> element, but the preferred
usage is to apply multiple ngCloak directives to small portions of the
page to permit progressive rendering of the browser view.
Related
I've run into a problem where refreshing an AngularJS page in IE shows the uncompiled AngularJS. I can use ngCloak to hide the uncompiled expressions when loading, but I can't find anything for when the page unloads. I can use ngBind instead of an expression, and then the expressions disappear instead of displaying raw, but I'm hoping for a better solution. Any ideas?
I'm still working on a demo where you can see the issue; I think the iframes used to display results in code snippets and stuff like JSFiddle are preventing me from replicating the problem.
A few tips that may or may not help.
Contrary to common advice, load Angular in head of document. That way when you hit an ng-if during page load, the browser knows what to do with it. If it's in footer ng-if is meaningless until page is loaded and thus elements flash up and then disappear during page load
Use class .ng-cloak as you are doing already.
Use booleans in controller to dictate when to display elements. E.g.
<section ng-if='controller.loading === false'>
you could place some of or your entire markup for a view in such a div to remove elements until they are ready for display
Play with ng-if ng-show and ng-hide, ng-if actually removes elements from the DOM whereas the other two just show or hide. They can produce very different results in terms of smoothness of page loading.
Where you use an expressions on an ng-if, be careful to ensure the expression is very accurate. Don't be sloppy with the expression. Consider what would happen if the var in the expression was undefined. Would your element show when you don't want it to?
Whilst I haven't directly dealt with unloading these same concepts can be applied.
When i want to make something start as hidden with ng-show you can just add class="ng-hide" so the css will hide the element beforehand. This way an element won't be shown when the page is still loading
I want to do the same thing using ng-if but i don't know how to do it
As Michiel suggested, using the ngCloak directive is the solution.
Just add ng-cloak to the class attribute of the tag you want to keep hidden while your application is loading.
<div class="ng-cloak">test</div>
For more details: https://docs.angularjs.org/api/ng/directive/ngCloak
So I'm a bit new to Angular, and I'm wondering what best practice would be if I wanted to be able to toggle content completely away. So you would be able to view it, or toggle off to hide it. Sorta clean things up. Should I use a if statement, or maybe give the content two sides (one being empty) and be able to switch between them? What would be best?
View switching in angular can be done in a multitude of ways. In order to do route based switching (switching based on the hash in the url). Use a combination of the ngRoute module which helps you to configure routes through the use of the $routeProvider and the ngView directive.
$routeProvider docs:
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
ngView docs:
https://docs.angularjs.org/api/ngRoute/directive/ngView
Also you can hide/show, add/remove content via these directives
ngIf - will completely remove and destroy the scope of the content
https://docs.angularjs.org/api/ng/directive/ngIf
ngSwitch - will work similar to a switch statement in javascript. This is used in conjunction with ngSwitchWhen and ngSwitchDefault. Like the ngIf directive this will also remove and destroy the scope of the content.
ngSwitch/ngSwitchWhen/ngSwitchDefault
https://docs.angularjs.org/api/ng/directive/ngSwitch
ngHide/ngShow - per the name these directives will simply toggle the classes ng-hide and ng-show respectively. ng-hide has a css property of display: none.
ngShow:
https://docs.angularjs.org/api/ng/directive/ngShow
ngHide:
https://docs.angularjs.org/api/ng/directive/ngHide
The directives that completely remove the contents can be better for performance since the number of watchers in your app can accumulate fairly quickly. In most cases I'd suggest using the removal based directives for anything that has an evaluation of the scope beneath it and use the hide/show directives for simple static content display.
There are example usages of each of these directives on all the documentation links I've included. Feel free to comment with questions.
I'm currently working on a new custom directive which will transclude some HTML around the element you've called it on. This means however that if you have a ng-show directive as well on the element that the HTML would still be transcluded and hence shown.
A working example of the directive is located on this Plunk.
I'd like to counter this, by making my custom directive respond to ng-show but I can see a big problem with this approach as ng-show will hide or show the whole element it is called on.
On the other hand, I don't really like having a lot of custom directives each defining their own visible properties as an alternative to ng-show.
A third option would be to support both? This would allow me to switch of specific directives on an element as well as hiding it completely with ng-show
Has anyone got good recommendations on which approach I would have to take here? This is not a solitary case, we have a lot of custom directives of which we'll need to control visibility.
To summarize, these are the three options I'm thinking of:
Let custom directive respond to ng-show
Define own visibility control per custom directive (which could use ng-show underlying)
Support option 1 and 3
Any insights greatly appreciated.
I have an angular multi-step form in a modal window. It has a few different views and works great but at the end of it I just want to display a tiny snippet of HTML along the lines of 'Thank you, we will be in touch shortly'
However, I thought about creating a view for this with a partial but it seems incredibly over-engineered for what it is. Is there any way in angular of just replacing the view with that sentence without creating a whole new view? This will be called from a function in the final controller
Use ng-show and ng-hide to do this in your view. Suppose if your view is no longer needed you can hide it and show the Thank you snippet at its place by using ng-show.
ng-switch is what you are looking for.
From the docs:
"The directive itself works similar to ngInclude, however, instead of
downloading template code (or loading it from the template cache),
ngSwitch simply choses one of the nested elements and makes it visible
based on which element matches the value obtained from the evaluated
expression."
http://docs.angularjs.org/api/ng.directive:ngSwitch
you can this code, if you have one area of content
<ng-view></ng-view>
good method you can find in LINK