Html code,
<span style='cursor:pointer' data-ng-class='highlightedText:true'>Dheepan raju</span>
css,
.highlightedText{
text-decoration: underline;
}
Simple code. But the text is not underlined. Did I miss anything? Here is the plunker.
ng-class takes object as input. And you are passing it as plain text.
Your code should be
<span style='cursor:pointer' data-ng-class='{highlightedText:true}'>Dheepan raju</span>
Checkout your plnkr, there is angularjs 404 error also. Try changing angularjs source url.
Here is the updated plnkr.
ng-class has to be used like this
ng-class="{highlightedText:true}" and I think your angular script has some error, try copying angular CDN.
Related
There is anything in angularJs which can intercept html code besides than ng-bind-html?
In my code I found a problem when using ng-bind-html because in my css page I define a style using data-title attribute.
So now I need data-title attribute because I'm using it into my css and also I need the ng-bind-html to intercept the html code but the problem is that data-title and ng-bind-html don't work together in my example.
<p data-title="{{user.name}}" ></p>
<p ng-bind-html="user.name"></p>
.card.opened p:after{
content:attr(data-title);
transform: rotateY( 180deg );
display: block;
}
UPDATE:
To explain more what I'm trying to do:
I have a reverse card and when I click on the card it should return and show the content (data-title) with a formatted text, So to manage the return of the card I'm using the css above, (with data-title) and to intercept the html code I'm using ng-bind-html.
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.
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>
I'm using angular ui-router.
I want to show something if <div ng-show="total > 0">
While the template is downloaded and shown immediately we can see a flicker of the div, before the controller loads $scope.total =.
One would think that $scope.total is undefined in the beginning hence the div would be hidden, but I think the template isn't yet parsed, it's just shown raw. I tried using ng-cloak but it doesn't seem to help. Ngcloak is supposed to be used while angular is booting up, but I'm using ui-router so the angular stack is already loaded. How can I hide my elements on the template without resorting to ui-router resolves?
I'm using angular 1.2.8 and ui-router 0.2.7.
PLease check this one, seems like solution to your problem.
https://stackoverflow.com/a/13276214/801354
You'll have to apply this style to get ng-cloak working
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
None of the solutions worked for me. The only solution is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
I am using angular's ng-include like this :
main html:
<span ng-include="'tpl.html'" ng-controller="TplCtrl" onload="loadMe()"></span>
template tpl.html:
<h2>{{ tplMessage }}</h2>
the controller:
$scope.loadMe = function () {
$scope.tplMessage = 'template';
}
})
this was working fine with angularjs 1.1.5 but not anymore in 1.2.0 rc 3
here is a plunkr :
http://plnkr.co/edit/zYRevS?p=preview
any idea how to make this work with 1.2.0 ?
edit:
i saw this : https://github.com/angular/angular.js/issues/3584#issuecomment-25279350
but can't find the answer to this problem here.
ok i found the answer here : https://github.com/angular/angular.js/issues/3584#issuecomment-25857079
ng-include can't be on the same element as ng-controller. In 1.1.5, it was working
here is a working updated plunker with an html element wrapping the ng-include:
http://plnkr.co/edit/CB8jec?p=preview
It seems to have to do with you mixing 2 things on the same tag - it has both ng-include and ng-controller on it. put your span inside of a new one and move the ng-controller to the outside tag.
They might'of changed the order in which these attributes are processed. In general I think mixing them on the same tag is not a good idea.
Because it's just broken, and there is currently no workaround.
According to the change long:
"previously ngInclude only updated its content, after this change ngInclude will recreate itself every time a new content is included. This ensures that a single rootElement for all the included contents always exists, which makes definition of css styles for animations much easier."
but instead of being improved, it appears to have been broken.
According to the comments here the current implementation is broken.
Other sources will tell you the same.