I have the following "Angular HTML"
<div class="radio input-l" ng-repeat="carPark in initialPlace.carParks" ng-show="!carPark.isBlueBadgeCarpark || isBlueBadge">
<input type="radio" name="payment" ng-change="updateParkingSpaces(carPark, initialPlace)" ng-model="initialPlace.selectedCarpark" value="{{carPark.carparkID}}" id="carpark-{{carPark.carparkID}}">
<label for="carpark-{{carPark.carparkID}}">
£{{carPark.cost}} - {{carPark.carparkName}}
</label>
</div>
which renders and works fine in FireFox/Chrome/Safari/[insert another decent browser here]
This is a plunker of what I am trying to do, I can't get plunker (even the root site) working on my MSIE so I have no idea if it behaves correctly, but it really is as simple as this
But in MSIE 7/8 I still seem to get "{{carPark.cost}}" rather than the value
everything else seems to work fine, except the {{ ... }} notations
MSIE 7 Error:
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
http://errors.angularjs.org/1.2.3/$sce/iequirks
To fix this I just had to add a reference to JSON3.js. For some reason JSON2.js wouldn't work but JSON3 worked fine, I used cdnjs.com for the cdn
Related
I am facing a strange issue which take my 4 to 5 hours but i am still unable to find a solution.
The error is i am getting is my code is just working fine on chrome and firefox safari all browsers but when i am running it on IE11 it throw me this error:
[Vue warn]: Error compiling template: <div class="floating-chat lh-2-0" id="chat-app"> <span class="title pull-lef col-md-12"> <span class="chat-notification-icon" v-if="this.unreadChatOfUsersCount.count > 0"> {{this.unreadChatOfUsersCount.count}} </span> Messaging </span> <div class="pull-righ col-md-"> </div>
Please someone give me a solution for this.
I converted my all methods from method(){} to method: function(){} also add polyfill but cant reach to result.
I had such problem on my project. It can happen in case you are using IE incompatible code in the component template.
For me, it was string interpolation in the href attribute.
I've got huge problem when doing HTML compilation with Template Engine build in JavaScript.
Everything is working for Chrome, FF.
IE8 works just in one case - when my HTML is set as variable.
Scenario for HTML:
1). Below example works in all browsers (even in IE8)
var phone_tpl = '<div class="demobile-view">'+
'<div class="heading clearfix">'+
'<span class="attention">{{& attention}}</span>'+
'<h4>aaa</h4>'+
'</div>'+
'</div>';
2). Below example work in CHrome, FF. IE8 won't work with it.
<script type="text/template" id="phone_tpl">
<div class="demobile-view">
<div class="heading clearfix">
<span class="attention">{{& attention}}</span>
<h4>aaa</h4>
</div>
</div>
</script>
Second point in IE8 console responds with error "Unterminated string constant".
I'm attaching full package of library + init example.
http://jsfiddle.net/2trv57rk/
Really believe that someone will be able to help me :) I hate writing HTML in quotes :) I need to have clear, well-coded alternative.
Thank you in advance !!
I need to add tick marks below a ui-slider so that it looks somewhat like this:
Automated interpolation with ng-repeat doesn't work:
In my controller I have a limits array
$scope.limits = [ 1, 3, 5, 10, 15 ];
I reference limits in my html:
<p ng-repeat="l in limits"
style="left:{{$index*100/(limits.length-1)}}%"
class="slider-tick">
<span class="slider-tick-mark">|</span>
<br>
{{l}}
</p>
In Chrome this works fine, but not in IE9 - all the tick marks and numbers are bunched up on the left-hand side
Chrome:
IE9:
It's as if the style expression is not working ("left:{{$index*100/(limits.length-1)}}%")
Manual interpolation works:
If I code the repeated elements by hand, then it works as expected in IE9.
<p class="slider-tick" style="left:0%" ><span class="slider-tick-mark">|</span><br/>1</p>
<p class="slider-tick" style="left:25%" ><span class="slider-tick-mark">|</span><br/>3</p>
<p class="slider-tick" style="left:50%" ><span class="slider-tick-mark">|</span><br/>5</p>
<p class="slider-tick" style="left:75%" ><span class="slider-tick-mark">|</span><br/>10</p>
<p class="slider-tick" style="left:100%"><span class="slider-tick-mark">|</span><br/>15</p>
Question:
Is there any way to have the ng-repeat expression work in IE9?
Update:
After using the Developer Tools to inspect the DOM, I see there is no style tag on the <p> element at all.
IE9:
In Chrome's developer tools, that style tag does exist:
Chrome:
Use the ng-style directive instead of the style attribute. The browser is trying to interpret your Angular expression as (invalid) CSS; ng-style will make Angular evaluate the value and then apply it as the style attribute.
<p ng-repeat="l in limits"
ng-style="{left: ($index*100/(limits.length-1)) + '%'}"
class="slider-tick">
<span class="slider-tick-mark">|</span>
<br>
{{l}}
</p>
IE9 struggles with several of the directives requiring the $compile service. There are some steps you can take to try to enable IE9's support through shimming and such. Angular has a section of the developer guide dedicated to IE support of angular:
http://docs.angularjs.org/guide/ie
The most important piece directly related to IE9, is the ng namespace for the html tag:
<!doctype html>
<html xmlns:ng="http://angularjs.org">
I have found, that though the guide says this works, it's not always the case. Sometimes you have to use the data-ng-repeat as opposed to ng-repeat:
<p data-ng-repeat="l in limits"
style="left:{{$index*100/(limits.length-1)}}%"
class="slider-tick">
<span class="slider-tick-mark">|</span>
<br>
{{l}}
</p>
Edit... there was also some issues a while back where using ng-repeat would not transclude and bind elements on the same tag properly (your style declaration). the fix there is to ensure you have the latest version of Angular.
I've built a system that uses underscore-js to render templates, and it works fine in all browsers but IE.
Here's a fragment of the template:
<td><input type="text" id="${_id}_name" class="name" value="${name}" /></td>
In IE8, I'll see type=text in the actual text field, if name is an empty string in the supplied object.
Digging a bit deeper I see that the underscore template in IE 8 looks like this:
<tr id="319"><TD><INPUT id=319_name class=name value= type=text></TD>
And the output from underscore in other browsers is:
<td><input type="text" id="310_name" class="name" value=""></td>
So obviously the lack of quotes around attribute values is causing this problem.
I also noticed the same problem with jquery-tmpl.
Here's a fragment of code showing how the template is set-up:
template = _.template( tmpl );
$.each(data.data.stored, function(i, row) {
$('table#user_data').append(template.template(row));
Any ideas how/why this could be happening?
OK, solution found. I found the issue raised on jquery-tmpl's github, here:
https://github.com/jquery/jquery-tmpl/issues/3
Apparently it is caused by the way IE serializes html, and a work around is to put some spaces in the tag. So:
${name} becomes ${ name }
When I receive the innerHTML of an element containing an input[type=text] element the speech marks around the value and id are removed in IE7 i.e.
<input type="text" id="test" value="test" />
Becomes:
<input type="text" id=test value=test />
This would be fine, other than the fact that I am using a JQuery plugin that takes a html segment and binds JSON to it. This means if I have a template:
<div id="template"><input type="text" value="${ValueToBind}" /></div>
When I retrieve this via document.getElementByID("template").innerHTML i get:
<input type="text" value=${ValueToBind} />
Thus, if I am binding a string with whitespace i.e. "this is a test" the output is:
<input type="text" value=this is a test />
Obviously, this is invalid html and causing havoc with my app. What I really need to do it to retrieve the html in the template AS IS, and not have IE try to do anything helpful like remove the " speech marks.
Cheers, Chris.
answered here innerHTML removes attribute quotes in Internet Explorer
If the problem is IE7 specific a quick fix may be to add an IE conditional comment for IE7 with code that re-inserts the quote marks.
I believe this isn't something you can get around directly as the quotemark-less html is just how IE7 represents the DOM node internally.
My view on the best way to ensure you get the exactly right template is to read each attribute of each node yourself rather than the inner html and then write them out with the quote marks.
See
innerHTML removes attribute quotes in Internet Explorer
for other ideas.
Using jQuery's .html()
http://docs.jquery.com/Attributes/html
would generally be the "jQuery way" to do this also rather than .getElementById