Angularjs Bug in Ie with Style VS Ng-Style

AngularJS bug in IE with style vs ng-style

When IE 9 & 10 tries to render that HTML, it basically removes the invalid HTML found on HTML to be parse.

So having style="display: {{'block'}}" consider as invalid html, because it has unknown {{}} syntax & it make that attribute rendered as style=""

Other than having ng-style there you could use ng-attr-* directive like below

<div ng-attr-style="{{'width: '+ progress.percent() +'%;'}}"></div>

which will create style attribute when progress.percent() value does changed.

For more information look at this old logged github issue

How style attribute become ""?

Angular JS ng-style and Internet Explorer 8

Ok I found why {{ }} wasn't working in IE7: you have to polyfill JSON.stringify because it's used to display objects and IE7 don't have it, if you display a string it's working:

http://jsfiddle.net/NLrYx/3/

More info on IE7 compat: http://docs.angularjs.org/guide/ie

JSON script: https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Angular Bug IE10 variable in style attribute

As a workaround you could use ng-style:

<div ng-style="{ 'margin-left': 50 + 'px'}">TEST2 {{50}}</div>

Fiddle: http://jsfiddle.net/YXe8Z/

AngularJS syntax error while using ng-style for background gradient

Try this code change

<div class="test-data" style="background: {{statusStyle}}"></div>

var empty = 100 - status.test;

$scope.statusStyle = 'linear-gradient(#f2f2f2, ' + color + ' ' + empty + '%)';

This change makes the {{statusSyle}} angular expression evaluate as a JavaScript string and not a JavaScript object set with { field : "value", ...}. The AngularJS syntax error is likely resulting from trying to write the $scope.styleStatus object to your expression.

The other change is the inclusion of only one % in the color-stops for the linear gradient. Use the % only in the second color-stop.

CSS3 Linear Gradients have been supported in most browsers for some time.

General Syntax:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

With both color stops set to the same % you will not get a linear gradient but a color break at the % value entered with the first color and generally the browser ignores the % on the second color.

Use this example code below in your browser to test some linear gradients.

HTML Code

<body>
<div id="grad"></div>

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.  

<br>  
Syntax:<br>  

background: linear-gradient(direction, color-stop1, color-stop2, ...);
</body>

Styling

#grad {
  width: 100%;
  height: 620px;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow 90%); 
     /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow 90%); 
     /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow 90%); 
     / For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow 90%); 
     /* Standard syntax */
}

Angular JS Directive not rendering inline style in IE9

IE (including 11) does not support interpolation in style attributes. You must use ngStyle for that, e.g
ng-style="{'background-color': myAppInitials.IconColor}"

https://docs.angularjs.org/guide/ie

This is my working solution, though I'd prefer to include the ng-style element within the template of the directive but I am not yet sure whether this is possible:

<tr ng-repeat="person in data.people">
    <td class="text-left">
       <div ng-style="{'background-color':person.IconColor}" class="userIconMedium" myapp-initials="person"></div>
    </td>
</tr>

The directive:

angular.module('myapp.directives', [])
    .directive('myappInitials', function () {
       return {
          restrict: 'A',
          template: "{{myappInitials.Firstname.charAt(0) + ' ' + myappInitials.Surname.charAt(0)}}",
          scope: {
             myappInitials: "="
          }
};
 });

angularjs ng-style: background-image isn't working

Correct syntax for background-image is:

background-image: url("path_to_image");

Correct syntax for ng-style is:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">

AngularJS style issue IE

The issue is the same, solvable with ng-style or ng-attr-style:

ng-style:

<div ng-style="{left: ((result.user_score * 20) - 10) + '%'}" class="test-box" ng-if="result.is_mesurable==true">

ng-attr-*

<div ng-attr-style="left:{{ (result.user_score * 20)-10}}%" class="test-box" ng-if="result.is_mesurable==true" >

Angular Bug IE10 variable in style attribute

As a workaround you could use ng-style:

<div ng-style="{ 'margin-left': 50 + 'px'}">TEST2 {{50}}</div>

Fiddle: http://jsfiddle.net/YXe8Z/

Angularjs Bug in Ie with Style VS Ng-Style