9

What am I doing wrong here? I've read through the IE Compatibility Guide but that doesn't mention data binding using {{}} tags. This works fine on other browsers but fails in IE (including IE9).

http://jsfiddle.net/yMgQ8/1/

HTML:

<html ng-app class="ng-app">

    <head></head>

    <body>
        <div ng-controller="Controller">
            <p>{{test}}</p>
        </div>
    </body>

</html>

JavaScript:

function Controller($scope) {
    $scope.test = "Hello world";
}

I've tried adding the steps mentioned in the compatibility guide but that doesn't seem to solve it, unless I'm missing something obvious!

It should output "Hello world", but on IE it outputs {{test}}.

Many Thanks.

5
  • 1
    Looks right. Have you tried it outside jsfiddle in a file with a <!doctype html> tag?
    – hyperslug
    Aug 16, 2012 at 11:41
  • Yep, the document I have it in has correct doctype set up. Other AngularJS functions work fine (it loads a JSON file with no hitches), but when trying to display data with curly braces it just fails for IE. Aug 16, 2012 at 11:57
  • <!doctype html> worked for me but make sure you don't have any comments above it see this post for more info: stackoverflow.com/a/7312841/1207991
    – Gloopy
    Aug 16, 2012 at 17:58
  • I have <!doctype html> at the top of the document with no comments beforehand. Aug 17, 2012 at 10:57
  • I am having the same issue in MSIE 7/8 did you ever figure out what was wrong? Dec 3, 2013 at 10:32

2 Answers 2

3

The problem appears not to be angular but jsfiddle

http://plunker.no.de/BL97Av/ this works in IE9

Also, IE7 or IE8 Compatibility you are on your own.

3
  • Thanks for the answer, I know that this does work on IE9, but I just can't get it to work myself. Why would this work on plunker but not jsfiddle? Aug 17, 2012 at 10:51
  • Seemed the issue on my end was that the function used to load a JSON file wasn't working in IE. I should have tested this before asking, so feel a bit silly now! I'll mark this as the accepted answer, however. Aug 20, 2012 at 11:20
  • The link is broken. Could you fix it and insert the relevant markup/code in the answer?
    – camden_kid
    Oct 21, 2016 at 14:10
2

For future reference; adding an id attribute to the html element solved my problem. In your case this would mean changing the code to:

<html ng-app id="ng-app" class="ng-app">
2
  • You have to bear in mind that I asked this question originally almost 2 and a half years ago. AngularJS has changed an awful lot since then. Jan 14, 2015 at 14:05
  • 1
    I know, but I spent more than an hour trying to figure out why it was not working on IE 11, unexpectedly this modification did the trick, so this response might be useful to someone else in the future.
    – downhand
    Jan 14, 2015 at 14:07

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.