I have 4 forms of which using angular ng-hide and ng-show to display each when needed. But when the page loads initially it displays all forms while loading and only hide them when loading completes. It really looks crappy while loading. Is there a way i can prevent this from happen?
ng-cloak will work for you
example:
in your css:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and in your code:
<div id="template1" ng-cloak>{{ 'hello' }}</div>
CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
HTML:
<body ng-cloak> ... </body>
will work, but it will hide whole body. https://docs.angularjs.org/api/ng/directive/ngCloak:
The directive can be applied to the 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.
so it's better to apply ng-cloak to particular elements:
<div ng-cloak> ... </div>
<div ng-cloak> ... </div>
Related
I have responsive angular web-site. When i use it on mobile device i can see different angular code strings eq.
"{{some.objects.value}}"
when rotation is over value seems to be ok.Any sugestions to hide angular code on rotation?
Look at the documentation for ng-cloak. This will hide sections of the page until the angular elements have rendered. This happens on rotation because the page is being re-rendered, so you briefly see the uncompiled angular strings.
Add this to your css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Then you can use the ng-cloak dirrective on any element.
<div id="item" ng-cloak>{{ 'hello' }}</div>
I have a custom directive where I present the values in it using {{}} but the problem is when the page is reloading I get to see {{}} there before setting the values. I tried using ng-cloak but too bad it is not working for me. After googling this I found an article stating that the problem might be timing: that angular takes time to use ng-cloak when loading large contents. Is this right? Do I have to change anything in my settings? Is there a value I should pass to ng-cloak?
Here's my custom directive
<button ng-click="myCtrl.clicked()" ng-hide="myCtrl.conditionOne" ng-disabled="myCtrl.conditionTwo" class="{{myCtrl.class}}" ng-cloak>
{{myCtrl.value}}
</button>
Typically, when ng-cloak "isn't working" it's due to not having the accompanying CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Straight from angular docs:
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
And that optional rule is:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I am getting the flickering of content. Trying to resolve it by using ng-cloak but that's not working. I have one main view and multiple templates for separate views. My main view includes
<section id="ng-app">
<div ui-view ng-cloak></div>
</section>
I added ng-cloak here and in CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
But inspite of this, the flickering is still there. Do I need to include ng-cloak separately in all the template files? Can anyone help me on this?
I am using Angularjs UI Bootstrap Tab set. In order to avoid initial flicker issue, with tab names, I am using ng-cloak, but surprisingly still the initial flicker is appearing. I guess it is due to the large html content I have. Can any one suggest any fix for this?
The following is my tab set, and tab names are causing initial flicker issue.
<body >
<div class="splash" ng-controller="ApplicationController" ng-cloak>
<p>Please wait while loading!</p>
</div>
<div id="content" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
<tabset>
<tab ng-repeat="eachTab in chartsTabs" heading="{{eachTab.tabName}}" select="createChartsPerTab(recordsSet, eachTab)"> </tab>
</tabset>
</div>
</body>
The following is my piece of code using ng-cloak:
<div id="splash" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
And in my custom css file I have :
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
What I would suggest is, as your tab name is seen with flicker effect, the issue is at the directive level, you can modify your directive tab's template html to include a ng-cloak wherever the name of tab appears.
You should also put a ng-cloak directive on your other container. I.e.
<body ng-controller="ApplicationController">
<!-- Please note that this splash is a separate div beside the main div -->
<div class="splash" ng-cloak>
<p>Please wait while loading!</p>
</div>
<!-- and here comes your content div -->
<div id="content" ng-controller="ContentController" ng-cloak>
<!-- everything else here -->
</div>
</body>
and your custom css looks like:
/* this css rule is to hide everything with the ng-cloak directive */
[ng-cloak] {
display: none !important;
}
/* this css rule displays the splash element if the ng-cloak directive is active */
[ng-cloak].splash {
display: block !important;
}
/* just style your splashscreen */
.splash {
position: absolute;
background-color: #ededed;
color: #ffffff;
display: none;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 5000;
}
.splash p {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 20px;
text-align: center;
margin: auto;
}
ng-cloack could not be used until the angularjs library is not loaded completeley.
try to work with the directive ng-include because it will only show the content after angularjs library is loaded and everything is compiled.
for example:
<html lang="en" ng-app="myApp">
<body ng-cloak ng-controller="YourController">
<div class="container">
<div ng-include="'templateWhichIsCompletelyCompiled.html'"></div>
</div>
</body>
</html>
I have HTML like this:
<div id="top"
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
// Body HTML here. No images are loaded. Just Divs
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/angular.js"></script>
Now the page briefly shows {{ app.userService.data.name }}.
If I want this to not show then do I have to have AngularJS in the head of my document? The reason I placed AngularJS at the end was because I wanted to have the page appear as quickly as possible.
Can someone advise me about this and also tell me how I can make the {{ xxx }} hidden when the page first loads up.
You could use ng-cloak to hide any elements until it get compiled.
<div id="top" ng-cloak
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
The CSS rules to hide the elements with ng-cloak will be added automatically by angular.js.
If that isn't fast enough you could add the css rules yourself at the head:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Or using the angular-csp.css file.
Also see: ngCloak documentation
you can do it in two ways -
ng-bind
OR
ng-cloak
{{ app.userService.data.name }}
Either way, you {{}} won't show up. no need to put angular.js inside head.
This is the role of the ng-cloak directive used as a css class.
Check doc: https://docs.angularjs.org/api/ng/directive/ngCloak
You better use ng-bind
<span ng-bind="app.userService.data.name"></span>
instead of {{app.userService.data.name}}.
This will avoid that flickering.