I am using angularjs from 2 months but never comes to problem like this, so thought of sharing with you people and getting some good suggestion on that. Here I am trying to apply ul/nav-group element dynamic values. Everything is working fine means, if I see developer tools on browser it gets value and everything, but not the +/- sign. I search on google its saying that it loads after DOM creation so it is not showing that. But no buddy tells the solution for that.
Consider my code:
<nav:group ng-repeat="parentChild in parentChildList" title="{{parentChild.filterText}}">
<nav:item data-view="/ui/icons/fa" ng-repeat="childs in parentChild.childList" data-icon="fa fa-lg fa-fw fa-plane" title="{{childs.filterText}}" />
</nav:group>
The value for particular fields are straight forward means its simple list.How the directive can solve this problem.
Appreciate any suggestions . Thanks.
Add an ng-cloak directive on the body tag of your app to prevent loading the element until angular has finished loading.
Your body tag would look like this:
<body ng-cloak>
...
</body>
You could also fix this by using promises in your services, that is definitely the best practice regardless, but ng-cloak is a quick and easy fix.
Hope that helps! If ng-cloak doesnt work for you post snippets of your controller and service and I will help you add promises.
Good Luck!
-Justin
Related
So in my angular view I have this:
<div id="submenu" ng-include="'/submenu.html'" ></div>
But when I visit the page, the HTML part is:
<!-- ngInclude : '/submenu.html' -->
I put this line of code in other pages and it renders correctly. Only on one page it gets commented out.
What should I do, how can I fix this? I never saw this bug before.
Thanks
edit
I just checked and the code does not even perform a GET for this particular html file.
edit
I just remove the complex parts out of the age and now is just
<div id="submenu" ng-include="'submenu.html'" ></div>
<div id="anothersubmenu" ng-include="'anothersubmenu.html'" ></div>
and no one of these files render, they both get commented out. My controller looks normal. I view this on Chrome 49.0.2623.87 m. All the included files have the same id , everywhere I include them. All the files are in the same folder.
I dont know is there a limit on the ng-include?
Thanks
I had the same scenario but I created the ngInclude element using
angular.compile and I also got
<!-- ngInclude : '/file.html' -->
and I did not see any requests going out from my browser to get the file
Finally I resolved the issue using the
scope.$apply()
The digest cycle had to happen before the actual including can take place.
hope it helps :)
I want to show content that comes from a directive when the user clicks on a link.
<li>Show popup</li>
Obviously I'm new to angularjs. I know the approach above doesn't make sense really but I was also trying to imagine how this might be done with ng-if but not coming up with anything. Any ideas? Thanks!
Edit 1: The directive that I want to use is:
<ng-pop-up></ng-pop-up>
That's part of ngPopup.
Edit 2: This is now resolved. It turns out that in the case of ngPopup, you put the directive somewhere, then you open the dialog using the open method, so I really didn't take advantage of the solutions given here. Giving Martin credit because his solution solves problem originally stated. Thanks all.
Not exactly sure what you are looking for.
When you say, content from a directive, is this an existing directive, or do you think the content should come from a directive?
In your example where you have show popup, do you mean you would like to have a dialog displayed when you click the link?
Or do you just want something like the following example?
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=app>
<a href="#" ng-click='showMessage = true'>Click Here</a>
<div ng-show="showMessage">Your Message Here</div>
</div>
Try looking at using ng-if (AngularJS docs). You can use a boolean in your scope to that is toggled by the ng-click.
I am going to create an application with Angularjs. I have several modals (with the ng-dialog libraries) to create, modify data like an user for example.
When I open it, I can always see during several milliseconds names variables with accolades like {{user.name}}, before it renders the real value.
It is not really beautiful and then if someone has an idea about how to manage this type of display problems, please share it.
Thank you in advance.
There are couple of ways to deal with it, you could either use ng-bind or ng-cloak directives
Check angular ngCloak directive documentation
https://docs.angularjs.org/api/ng/directive/ngCloak
You can use ng-bind. Here is the official documentation on it:
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed >by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, >it makes the bindings invisible to the user while the page is loading
Usage:
Hello <span ng-bind="name"></span>!
I have a few bits of HTML like
<p class="noresults">{{numberOfContacts}} Results Are Available</p>
Is it possible for me to hide {{numberOfContacts}} until Angular has loaded? So it would just say Results Are Available
I've seem some solutions such as hiding the entire body until Angular has loaded, but I'd rather not do that if possible.
Yes, use ng-cloak. Simply add class="ng-cloak" or ng-cloak to an element like this
Using directive <div ng-cloak></div>
Using class <div class="ng-cloak"></div>
It's simply a set of CSS rules with display: none !important and as Angular has rendered your DOM it removes the ng-cloak so an element is visible.
use <span ng-bind="numberOfContacts" /> instead of {{numberOfContacts}}
Sometimes, even if I used the ng-cloak, I could still see the braces for a few seconds. Adding the following style resolved my issue:
[ng-cloak]
{
display: none !important;
}
Please see this link link for more explanation.
Hope it helps :D
This is typically only an issue when working with complex content on really slow devices. In those instances, there can be a brief moment when the browser displays the HTML in the document while AngularJS is parsing the HTML, getting ready, and processing the directives. In this interval of time, any inline template expressions you have defined will be visible to the user. Most devices nowadays have pretty good browsers which are quick enough to prevent this from being an issue. There are two ways to solve the problem.
Avoid using inline template expressions and stick with ng-bind directive.
(Best) Use the ng-cloak directive which will hide the content until Angular has finished processing it. Basically, the ng-cloak directive uses CSS to hide the elements and angular removes the CSS class when the content has been processed, ensuring that the user never sees the {{ and }} characters of a template expression.
One strategy to consider is using the ng-cloak directly to the body element, which will ensure that the user will see an empty browser while AngularJS loads. However, you can be more specific by applying it to parts of the document where there are inline expressions.
I have seen issues with ng-cloak not working when added to an element. In the past, I have worked around this issue by simply adding ng-cloak class to element.
You can use ng-bind instead of expression like
<span ng-bind="data"></span>
What is the recommended way to quickly inspect the values on my html section of my jsfiddle examples?
Is there a more efficient practice than using the {{}} or filtering to json?
<div ng-app="myApp" ng-controller="MainCtrl">
<div
ng-init="index=0; classes=['red', 'yellow', 'green']"
ng-click="index = index + 1"
ng-class="classes[index % classes.length]">Click to change traffic color</div>
Index = {{index}};
Length = {{classes.length}}
Style= {{classes[index % classes.length]}}
</div>
I just want something simple to look at tiny examples like this one:
Another example
EDIT: This is a more advanced technique on how to build an implementation of AngularJS from the ground up. I cant think of a better way to really learn and understand Angular if you have the patience,time and know how.
There's an official Chrome extension for inspecting AngularJS apps. It lets you view $scope variables, dependency graphs, performance, and more.
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en