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.
Related
I had an angular code for an image like <img class="testClass" ng-src="{{ImagePath}}" alt="{{imageName}}" />
However when after the page loads, I see an src attribute to the img tag as shown below.
<img class="testClass" ng-src="/files/imageName_1.jpg" alt="Image 1" src="/files/imageName_1.jpg">
So, does angular add src attribute as well by default?
Example jsfiddle http://jsfiddle.net/wktwL/5/
If we inspect the element on the output image, we can see both ng-src and src attributes.
Yes, angular adds the appropriate HTML tag's attribute for all the valid ng-* directive.
Basically, you add the 'ng-src' for an element; When angular starts the parsing of the HTML and it encounters the 'ng-src' attribute it tries to find the registered 'ngSrc' directive when found it invokes that directive and that directive's logic adds the src tag.
From the AngularJS website:
Using AngularJS markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
Yes, AngularJS add the appropriate HTML tag attribute for valid ng-* directive.
AngularJs is always convert directive to html tag.
Yes, the way I see angular implementation and docs, angular adds the src attribute to img tag along with ng-src attribute
I have hit this a couple times, where I want to selectively render a tag on a condition but leave the contents. My use case is a directive when I have an optional link, so I want to render the opening and closing <a> tags but leave the contents alone in either case.
<a ng-if="condition"><p>Render me always</p></a>
The only way to do it in Angular without writing custom directive is to use two ngIf conditions:
<a ng-if="condition">
<p>Render me always</p>
</a>
<p ng-if="!condition">Render me always</p>
Looking at this particular use case, this seems to be more of a cosmetic issue. Would not the ng-class directive not work for this?
<a ng-class="{'non-link':boolCondition}"><p>...contents</p></a>
CSS is responsible for the basic look & feel so create a style that reflects that and then you needn't worry about duplication or directives, etc.
.non-link {
pointer-events: none;
cursor: default;
}
ref - Is it possible to make an HTML anchor tag not clickable/linkable using CSS?
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.
Hi I am allowing users to specify whether they want to print reports in a landscape or portrait format.
I was wondering if it's possible to add this (see below) into the head of the web document using a angularjs directive? That way it will change the printing size depending on the user input.
<style>#media print{#page {size: landscape}}</style>
This depends on whether you are going to be using this functionality in many different places. If you only need it once, then a directive may be overkill.
You can simply put
<style> #media print {#page { size: {{ orientation }} } }</style>
within your angular controller, and specify orientation on the $scope.
To my knowledge there is no need for the style tag to be in the head.
You can use the ngStyle directive to conditionally apply css. See AngularJS ngStyle. The example at the end of the link shows how to do that.
I had to crate custom stylesheet on the fly with unique IDs, I made it nicely work with angularJS like this :
<style type="text/css"
ng-bind="vm.css">
</style>
(note the use of ng-bind)
where vm.css looks like that in the controller
vm.css = `#${$scope.id} { background-color: red; }`
Hope this helps!
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>