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
Related
after clicking on any of md-dialog buttons (ok,cancel,create..) the dialog it self diaper but a <div class="md-dialog-container"></div> which is part of the default dialog code dose not diaper and act as a cover to the all web page, turning it unresponsive..
i have found this link https://github.com/angular/material/issues/3782 but the solution suggested doesn't seem to work..
any advice would by highly appreciated
i ended up using some basic js to solve this problem
js:
$scope.removeDialogContainer=function(){
$('.md-dialog-container').addClass('display-none-md-dialog-container');
};
css:
.display-none-md-dialog-container{
display: none !important;
}
adding this code ($scope.removeDialogContainer()) to the relevant dialog buttons seems to work
in my opinion it's not the best solution, would have preferred a css or html solution, not using js..
I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.
I have:
angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
i have the angular-motion.css file loaded too
the modal opens at the top, without animation whatever i set for animation or placement
Am i missing more css or js requirements not in the docs?
Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
This is actually mentioned on the github page but not in the docs so i missed that.
The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:
data-placement="center"
.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css
or just copy the part for centering modals:
.modal.center .modal-dialog {
position:fixed;
top:40%;
left:50%;
min-width:320px;
max-width:630px;
width:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
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.
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.
I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.
See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?
Thanks in advance.
Spent quite some time tracking all the problems in your plunker, there were quite a number of them:
you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>
The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.
If you remove the overflow: hidden; from the .ngCell it all starts to "work":
http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview
I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.
More info about how to make work ng-grid + typeahead inline editing:
http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/
plunkr:
http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info