I am using $scope to set the background image of a div tag in my html using inline styling.
This is my code:
<div class="banner" style="background-image: url('{{bannerImage}}'), url('images/generic.jpg')"></div>
The scope works fine but I get this error in my console.
GET http://localhost:9000/%7B%7BbannerImage%7D%7D 404 (Not Found)
Anyone have an idea what may be causing this?
You need to use ng-style instead since you are outputting an expression. Using plain style won't make Angular evaluate the bindings.
You can use ng-style. May be it can help.
Related
AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
{{checking}}
Result in HTML page in browser:
<div>check</div>
Now what I want is that the $scope.checking variable be parsed in HTML as if it's a tag I defined.
So the result in html page should be:
check
and the above should come in red color
Any way to do it? hopefully its simple... AngularJS experts please help!
i got the output but the string doesnt come in red! the style tag is ignored! how can i do it? do i use interpolate?
Use ng-bind-html!
Here is the docs-page for ng-bind-html. This will help you.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
ng-bind-html will render your html-string in the browser.
Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/
I am binding the background url css property in this way:
<div class="ng-cloak" style="background-image: url({{image.url}})"></div>
all the images are loaded correctly but in the console I have:
GET http://localhost:8100/%7B%7Bimage.url%7D%7D 404 (Not Found)
even if I use the class ng-cloak.
Does someone know how to avoid this error and this bad request?
Try to use ng-style instead because angular will not check none ng-*
https://docs.angularjs.org/api/ng/directive/ngStyle
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>!
Do you know why is the {{ project.title }} before I see the real value of the scope.
And how to solve that ?
EDIT : <title>{{ pageTitle }}</title>
Page is loading
Page completely loaded
Your views for Angular.JS apps are just static HTML. If you remove the script tag that references Angular.JS, you'd end up with a page full of curly brackets in plain sight that never get replaced.
When your browser finished loading Angular.JS and loading your application, the expressions in those curly brackets are evaluated. That's why you see, for a brief moment, {{…}} in your page title.
As noted by others, the ng-cloak directive is usually the way to get rid of the flickering before the app is fully loaded.
But since ng-cloak is just CSS, it cannot be applied to the page title. You'll need ng-bind for that, as noted here.
<title ng-bind="pageTitle">Default Title</title>
You should be showing the code, but in general it's probably because you aren't using ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak
However, in the case of the title, you need to use ng-bind=project.title instead <title>{{ project.title }}</title>
Check How to hide {{title}} in <title> tag while using AngularJS?
To prevent this, you should use ng-bind instead of {{ }} for the first screen of your app.
ng-bind is a directive that is added to an element attribute, so it is displayed only when the page is loaded.
According to the description of ngBind, we usually use {{ expression }} to replace ng-bind. But in a first-loading situation, image that you firstly load AngularJS(maybe in index.html), it'll show the original {{ }}. After that, it transits to what u need. To overcome it, you can use ngCloak or just use ng-bind in your first page.
OK, please check this ?
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>