I was playing with this toy Angular JS application and tried to use the ngCloak directive to hide the templating markup at startup. When applied to the tag where I declare the app module, everything works fine:
<div ng-app="EditorErrante" ng-cloak>
but when I try to cloak only the second Controller:
<div id="stats" ng-controller="Statistiche" ng-cloak>
nothing happens the directive has no effect: I can still see the markup in the "stats" div before it gets processed.
I tried adding the directive as a class and copying the CSS rule in the stylesheet. Still nothing.
Anybody know why this happens?
Try this:
Add a style in your stylesheet:
.ng-cloak { display:none; }
Then use ng-cloak as a class instead of an attribute:
<div id="stats" ng-controller="Statistiche" class="ng-cloak">
e.g. http://plnkr.co/edit/xWPW2i?p=preview
should work now.
Remember, you can use directives as classes as well, not just attributes and elements.
Edit, just tested this, and you dont have to put it into a class. So just add the .ng-cloak style into your stylesheet.
Related
I have a screen which has a loading spinner at start up. On this screen, I have a controller that passes a property to a directive. The directive has an ng-show based upon this property.
Once I have set the above property to true, I want the directive to show the content and I want the controller to hide the loading spinner.
What is happening is, the spinner is being hidden before the directive renders the ng-show. This causes a flicker. I would expect the directive to completely loaded by the time I have hidden the spinner.
This is in the controller:
showSpinner();
$scope.showContent = true;
hideSpinner();
This is the directive initializer:
<div content-directive show-content="showContent "></div>
This is me passing in the property into my directive:
return {
scope:
{
showContent : "="
}
};
this is my directive markup:
<div ng-show="showContent ">
<div style="width: 100px; height: 100px; background-color:dodgerblue"></div>
</div>
Take a look at using ng-cloak on your div of content you want to be shown. From the docs:
The ngCloak directive is used to prevent the AngularJS html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
<div ng-cloak ng-show="showContent ">
<div style="width: 100px; height: 100px; background-color:dodgerblue"></div>
</div>
Then, also from the docs:
When this css rule is loaded by the browser, all html elements
(including their children) that are tagged with the ngCloak directive
are hidden. When AngularJS encounters this directive during the
compilation of the template it deletes the ngCloak element attribute,
making the compiled element visible.
https://docs.angularjs.org/api/ng/directive/ngCloak
Am a Starter in angularjs. Having 5 more pages controlled over uiview to get the pages.
I need to change the style from container to container-fluid where i used uiview in index page.
In html,
<div class="container" ui-view> </div>
For only one page i need to change the class to container-fluid.
I tried like this.
In html,
<div ng-class="{container-fluid: clearance}" ui-view> </div>
In controller i mentioned,
$scope.clearance= true;
It does not renders the ngclass. Can anyone please help on this.
An object property name can't have a - in it without quoting that whole name
Try
<div ng-class="{'container-fluid': clearance}" ui-view> </div>
Also depends which controller you are referring to. If it is the controller referenced in the routing config, then it will only have scope inside the ui-view
I am new to AngularJS and I would like to learn the best way to do this.
Here's my issue:
I have an anchor, that - after clicking on it - should toggle between classes "show-all" and "hide-all", and also update the css of a div.
Here's what i have so far:
<a class="{{state}}" href="#" ng-click="ToggleDisplay()"><p>{{stateTitle}}</p></a>
<div>CSS should be updated here</div>
And a bonus question: is there and easy way to transition the CSS change on the div (which is from height:200px to height:auto)?
to do a show all, hide all methods you can use the ng-show or the ng-hide methods, binding a keyword in it, you can make a method to use with the anchor to solve you're problem like that way
HTML
<a ng-click="showAll()">show all</a>
<p ng-show="hide">things to hide</p>
<p ng-show="hide">other things to hide</p>
JS
$scope.showAll=function(){
if($scope.hide==false){
$scope.hide=true;
}else{
$scope.hide=false
}
}
Another great way is the ng-class method where you can put a style code and make it a variable to change in your js file.
EDIT
a sample for ng-class:
<div ng-class="heightsample">i'm a div 100px's height</div>
<button ng-click="height-change()">change</button>
JS
$scope.heightsample={height:'100px'}
$scope.height-change=function(){
$scope.heightsample={height:'50px'}
}
I'm sucessful create and display templates with some data retrieved from REST service using AngularJS but, when JSON response is still loading, the browser show the footer template at the top and, when response return the JSON data, the footer goes to the bottom.
This occurs very quickly, but the footer template blinks at the top of the page before goes to the bottom.
I've tried using the ng-cloak approach, unfortunately, the problem still happening. I put the CSS to ng-cloak as the API Reference recommend.
Here is my app code:
<body>
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>
I try put the ng-cloak on body tag, ng-view, footer, and also inside the ng-view html template. This code represents all attempts (Note: I've try to use separately and together, with ng-cloak class and not)
<body ng-cloak class="ng-cloak">
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ng-cloak class="ng-cloak"></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>
Unfortunately after all these changes, the footer template still blink on top before loading is complete.
Anyone can help me to fix this?
Is any Bootstrap trick to put the footer on bottom, even when the main div is without height? I've tried use the nav-fixed-bottom tag but I dont want to have the bottom fixed on screen when the page has high height values.
Thanks!!!
Have you double checked whether you have any CSS rules that may be conflicting with the ng-cloak rule? This could happen with other styles, libraries etc.
If you have any rules that conflict, just adding display:none; may not be enough.
See Angularjs - ng-cloak/ng-show elements blink
If this is the case, the solution is to use !important to overcome this:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
ng-cloak and/or ng-bind can't help solve this problem, because this is not a "flash of uncompiled content" problem. Those directives are meant to hide content until Angular has had a chance to compile the HTML.
The problem you are trying to solve is more like: "I'm adding stuff to the page dynamically and stuff is moving around". If you want to show the footer only after the main content is loaded, I like the solution #Alex presented in his comment.
As Alex and Mark said, ng-cloak doesn't provide any benefit in this case. However I used something that worked for me and may also help others.
Initially, I don't display the footer.
.footer {
display: none;
}
then after the Angular is done with loading the content, the footer appears.
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.