Just wanted some clarifications. I was told that you are suppose to use ngAttr when there are interpolated markup. For example:
<div ng-attr-name={{Name}}></div>
I also seen some codes online where there are interpolated markups but they do not use ngAttr. Are there certain situations when you use ngAttr and not use ngAttr when dealing with interpolated markups?
I recall running into this issue when working with <svg/> and attempting to interpolate attributes such as cx (which happens to be the classic example in the current angularjs documentation). The browser will complain when you attempt the following:
<svg>
<circle cx="{{cx}}"></circle>
</svg>
due to restrictions when using the SVG DOM API. Therefore, the ng-attr directive comes in handy with
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
As a result, using the `ng-attr- directive in this scenario will appropriately set the value based on your binding. Now, what I have noticed new in the documentation are the following cases that have known to cause issues if you don't use ng-attr
size in elements (see issue 1619)
placeholder in in Internet Explorer 10/11 (see issue 5025)
type in in Internet Explorer 11 (see issue 14117)
value in in Internet Explorer = 11 (see issue 7218)
Related
I am trying to implement if , elif, else in jsx template to achieve the following data scoring,and labeling based on the scoring but I am unsure how.
Low – 0.0 – 3.9
Medium – 4.0 – 6.9
High – 7.0 – 10.0
I Have a div with the following code
{feeds.map(post =>
<button className="search-buttons detail-button">{post.cvss}</button>
)
Within JSX directly, we cannot use if/else or loops like (for,while). What we can use however is ternary operator.
Syntax DEMO: {isLoggedIn ? 'currently' : 'not'}
Use this resource from React Official Docs to get you sorted with this.
Conditional Rendering within JSX
You can however use if/else within a function that returns JSX into you code. (That case is also covered in the docs linked)
I have to track down a bug related to work of ng-class (sometimes it adds new value without removing old).
So I need a quick reference to see it's current value.
Is there any short (or not) way to bind that to the content?
I mean something like this:
<div ng-class="something">
{{ngClassValueDisplayedHere}}
</div>
I had exactly the same problem with ng-class not removing old value. After days of investigation it turned out that it was ngAnimate who was messing with class changes. removing it from angular module dependencies solved the problem (Angular 1.3).
ng-class can bind to many different things. From the documentation:
Expression to eval. The result of the evaluation can be a string representing
space delimited class names, an array, or a map of class names to boolean
values. In the case of a map, the names of the properties whose values
are truthy will be added as css classes to the element.
So in your example, just display whatever your something is. It's supposed to be an angular expression, which can be evaluated like any other with double-curlies. This will help you debug your ng-class
<div ng-class="something">
{{something}}
</div>
Demo
In case someone else stumbles upon this problem like I did just recently with angular version 1.5.8: https://github.com/angular/angular.js/issues/14582
P.S. Update to 1.5.11 solved the issue related to ngAnimate, prior versions still had the same issue.
I like a directive that conditionally puts a tag outside some content (but always prints the content), like this:
<p><strong ng-if-always-keep-inner-content="model.condition">{{model.text}}</strong>/p>
so if condition is true I get
<p><strong>yada yada</strong></p>
otherwise I get
<p>yada yada</p>
I could write it myself, but I want to know if it is possible to do with built in directives/options.
I should perhaps say this is used together with Bootstrap, which afaiu recommends using <strong> vs some class with a bold font.
I don't think there is a built in directive. You should write it.
I suggest to use a classic ng-if
<p ng-if="model.condition"><strong>{{model.text}}</strong></p>
<p ng-if="!model.condition">{{model.text}}</p>
In your specific case, you can also use ng-class and set the strong style via css.
I have to use two iframes, one for IE8 and other for the rest of the browsers. I see that the angularjs scope variable (myUrl) is getting evaluated for the later iframe but not the first.
<div id="frameContainer" class="modal-body ios-scroll">
<!--[if IE 8]><iframe ng-src="{{myUrl}}?domain=http://localhost:9001/" class="signInIframe" frameborder="0" marginheight="0" marginwidth="0" height="620" width="600"></iframe> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--> <iframe ng-src="{{myUrl}}?domain=http://localhost:9001/" class="signInIframe" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe><!--<![endif]-->
</div>
Your problem may lie with Internet Explorer 8 and lower having problems with custom attributes. (e.g. ng-src)
Check out this guide for more information.
This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML attributes and tags. Read this document if you are planning on deploying your Angular application on IE v8.0 or earlier. (emphasis mine)
To see if this is indeed the case, try doing what kmdsax suggested by changing ng-src to simply src. If that works, then your issue is most likely the custom attribute.
NOTE: According to the docs, if you don't use ng-src then your iframe won't resolve to the correct address. So make sure you read that IE compatibility guide to make IE8 and lower behave.
I tested your code in IE8 and it seems to be working fine.
You dont really need to use ng-src here, you can also use src, and the {{myUrl}} variable will be evaluated the same. Try that, see if it makes a difference for you.
I'm trying to work out why this doesn't work:
<a class="ng-click: loadSomeDatas();">Click here to load some datas</a>
But this does:
<a ng-click="loadSomeDatas()">Click here to load some datas</a>
Why are you using classes?
Well ng-* attributes don't play nice on some of the clients I have to support, thus rather than shimming them I'd rather just use good ol' safe classes.
This looks like a documentation error. According to the source code, it can only be used as an attribute. The link function does not use restrict so the default is "attribute only".
Can you try using "data-ng-click"? Angular will still work with data- appended before it's attribute names and this should be valid syntax in older browsers.
<a data-ng-click="loadSomeDatas()" href="#">Click here to load some datas</a>