scope variable is not accessed in angularjs in internet explorer

Question

I have a custom directive in which i am calculating width and assigning it into scope variable. That scope variable is being accessed in html which is working fine in firefox and chrome. But not in Internet explorer.

code in controller

cellWidth: 160 // property of an object

Code in directive

for (var i = 0; i < totalColumns; i++) {
    scope.columnMapping.columns[i].tempCellWidth = scope.columnMapping.columns[i].cellWidth * 100) / tableWidth;
}

HTML

<div style="width: {{column.tempCellWidth}}%;"> {{columnName}} </div> // IE does not evaluate this..

IE shows width: {{column.tempCellWidth}}% while inspecting an element.

Thanks in advance.

Mike Vranckx · Accepted Answer · 2015-08-18 09:15:31Z

1

You need to use the ng-style attribute instead of style directly.

<div ng-style="{ width: column.tempCellWidth }"> {{columnName}} </div>

Also to append the percentage sign (%), you should do it in your for loop

for (var i = 0; i < totalColumns; i++) {
    scope.columnMapping.columns[i].tempCellWidth = (scope.columnMapping.columns[i].cellWidth * 100) / tableWidth) + '%';
}

edited Aug 18, 2015 at 9:15

answered Aug 18, 2015 at 8:59

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Vranckx Over a year ago

Can you give more details what exactly is not working ? Do you have the style width attribute set with a value on IE ?

Alpesh Prajapati Over a year ago

Hey, it worked...I did exactly the same thing...(%) in loop ...thanks man..GLAD

Collectives™ on Stack Overflow

scope variable is not accessed in angularjs in internet explorer

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related