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.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 1
    Looks right. Have you tried it outside jsfiddle in a file with a ` ` tag? – hyperslug Aug 16 '12 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. – James Donnelly Aug 16 '12 at 11:57
  • ` ` worked for me but make sure you don't have any comments above it see this post for more info: http://stackoverflow.com/a/7312841/1207991 – Gloopy Aug 16 '12 at 17:58
  • I have at the top of the document with no comments beforehand. – James Donnelly Aug 17 '12 at 10:57
  • I am having the same issue in MSIE 7/8 did you ever figure out what was wrong? – DrogoNevets Dec 03 '13 at 10:32

2 Answers2

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.

Dan Doyon
  • 6,710
  • 2
  • 31
  • 40
  • 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? – James Donnelly Aug 17 '12 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. – James Donnelly Aug 20 '12 at 11:20
  • The link is broken. Could you fix it and insert the relevant markup/code in the answer? – camden_kid Oct 21 '16 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">
downhand
  • 395
  • 1
  • 9
  • 23
  • 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. – James Donnelly Jan 14 '15 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 '15 at 14:07