AngularJS data binding/templating not working in IE 8

Question

UPDATE:

So, it appears this is an issue with IE and javascript updating the title element. With that in mind, does anyone know how to fix that issue? As of right now I don't have an answer to accept for this question so might as well get to the bottom of this.

ORIGINAL QUESTION:

I've really been digging in to AngularJS recently and loving it. I'm running in to a major issue however. The data binding/templating is not working in IE 8. I'm setting a variable called $scope.pageTitle in my MainController and it works in Chrome and Firefox. In IE 8 it displays as {{pageTitle}} in the title bar and I can't find any information on how to fix this. Its driving me nuts. Can anyone help or point me to a resource I may have over looked? If really needed I can make a jsfiddle as an example.

Here is the top of my index.html:

<!DOCTYPE html>
<html lang="en" ng-app="App" ng-controller="MainController">
    <head>
        <!-- Vendor JS Libraries -->
        <script type="text/javascript" src="lib/angular.js"></script>
        <script type="text/javascript" src="lib/underscore-min.js"></script>
        <script type="text/javascript" src="lib/jquery.js"></script>
        <!-- Bootstrap JS & CSS -->
        <script type="text/javascript" src="lib/bootstrap/js/bootstrap.js"></script>
        <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
        <!-- Lightbox  JS & CSS-->
        <script type="text/javascript" src="lib/lightbox/js/lightbox.js"></script>
        <link rel="stylesheet" type="text/css" href="lib/lightbox/css/lightbox.css">
        <!-- Application resources -->
        <script src="static/app.js"></script>
        <link rel="stylesheet" type="text/css" href="static/app.css">

        <title>{{pageTitle}} &ndash; Site Name</title>
    </head>

and my app.js:

//AngularJS stuff
angular.module('App', []).
    config(function($routeProvider)
    {
        $routeProvider.
            when('/home', {templateUrl:'templates/home.html', controller:HomeController}).
            otherwise({redirectTo:'/home'})
    });

function MainController($scope){
    $scope.pageTitle = 'Default';

    $scope.setPageTitle = function(pageTitle){
        $scope.pageTitle = pageTitle;
    }
}

function HomeController($scope){
    $scope.setPageTitle('Home');
}

Yes because the routes are working and the templates are displaying the HTML content, just not any variables in those templates. — Kylee
– Kylee, Commented Nov 20, 2012 at 0:49
Ok. It's probably just a problem with IE8 title. Try manually changing title and see if anything happens, I bet it won't. document.findElementsByTagName('title')[0].text = 'Test Title'; — Andrew Joslin
– Andrew Joslin, Commented Nov 20, 2012 at 0:59
Interesting. It does seem to be an issue the title element. The variable in the body renders fine. Can the title element not be modified using javascript? — Kylee
– Kylee, Commented Nov 20, 2012 at 1:22
It can, but I bet not in Internet Explorer. Things just tend to not work there. :-p — Andrew Joslin
– Andrew Joslin, Commented Nov 20, 2012 at 3:58

Kylee · Accepted Answer · 2012-12-09 18:22:49Z

2

Thought I would post and answer since it came in the form of a comment. This appears to be an issue with IE and modifying the title tag with in Javascript. I solved this by using IE conditionals

<!--[if !IE]> -->
<title>{{pageTitle}} &ndash; Site Title</title>
<!-- <![endif]-->

<!--[if IE]>
<title>Site Title</title>
<![endif]-->

Not ideal but it works.

answered Dec 9, 2012 at 18:22

Kylee

1,6752 gold badges32 silver badges56 bronze badges

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

2 Comments

Curt Over a year ago

I don't understand. How does this work? On non-IE, I assume that your page shows: "Home - Site Title" and on IE, it shows: "Site Title". Don't you want to show "Home - Site Title" on IE as well? How do we do this?

Kylee Over a year ago

Not possible as far as I'm aware due to restricts IE has for updating the title element in javascript. All other browsers work fine.

Collectives™ on Stack Overflow

AngularJS data binding/templating not working in IE 8

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