Object tag value set in HTML page with Angular JS model not working in Microsoft Edge browser

Question

I have a HTML like following;

  <div class="tab-content">
    <div ng-repeat = "(key,val) in reportCollection" id="{{val.url}}" class="tab-pane fade in" ng-class="{'active': $index == 0}" repeat-done="layoutDone()">
      <object data="{{val.url}}/index.php" style="width:100%;height:80%;"></object>
    </div>
  </div>

Now via a controller I am updating a model "reportCollection" after an ajax call,

$http.get("ajax_config.php")
        .then(function(response) {
            $scope.reportCollection = response.data;

        });

In Chrome and Firefox soon after updating model different http request is being sent for different object tag inside ng-repeat(I checked from developer console and network tab). So everything is fine.

But in Edge different ajax call is being occurred but the ajax call path is val.url not the actual urls inside the collection.

As for example lets say my collection is;

var reportCollection = [

              {'url':'test.html',....},
              {'url':'myPage.html',....}

]

Now http request url in chrome and firefox as;

     http://.../.../.../test.html
     http://.../.../.../mtPage.html

But in edge it is like;

     http://.../.../.../%7B%7Bval.url%7D%7D/

So clearly it is taking as {{val.url}} as URL.

Can you please give me a detail insight about why is this happening and how to resolve it?

Myke Black · Accepted Answer · 2017-07-24 15:01:58Z

1

I believe this issue is covered in this post: angularjs expression in html tag

Basically, Edge is evaluating the data attribute before angular has a chance to replace the val.url property. Try using the accepted answer on the link above.

answered Jul 24, 2017 at 15:01

Myke Black

1,33915 silver badges15 bronze badges

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

1 Comment

KOUSIK MANDAL Over a year ago

Solved my issue.

Abd0m1nals · Accepted Answer · 2017-07-24 15:06:50Z

0

Try, to make it this way:

 <object data="{{val.url+'/index.php'}}" ....>

Or:

<object ng-attr-data="{{....}}" >

edited Jul 24, 2017 at 15:06

answered Jul 24, 2017 at 14:53

Abd0m1nals

2,48615 silver badges27 bronze badges

2 Comments

KOUSIK MANDAL Over a year ago

Didn't work, now it is like %7B%7Bval.url+'/index.php'%7D%7D

Abd0m1nals Over a year ago

It looks like Edge interprets the curly-braces differently, have you tried to just output the result of your using ng-attr? <object ng-attr-data="{{....}}" >

Collectives™ on Stack Overflow

Object tag value set in HTML page with Angular JS model not working in Microsoft Edge browser

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related