MandalaTV
Personal and Professional Blog of Rich Hauck

Getting AngularJS Includes Working in IE6

by: Rich Hauck

I happen to be tinkering around on a project in which I’m planning on using AngularJS for some of the dynamic content. In this project, I want to use ng-include to setup header and footer include files (without going server-side–don’t ask).

The catch? The goal is to support older versions of Internet Explorer (again, don’t ask).

Angular’s website just so happens to have a nice guide on supporting “IE v8.0 or earlier”. Curiously, it doesn’t specify just how far back support goes for these tricks, and I found a strange issue when attempting to use includes.

Following Angular’s documentation, here’s how I went about defining an include path in a controller. In my controller file, I set a header and footer variable on the scope:

Here’s my controller:

function Ctrl($scope) {
  $scope.header = 'inc/header.htm';
  $scope.footer = 'inc/footer.htm';
}

Here’s what the HTML looks like:

<div ng-include="header"></div>
<div ng-include="footer"></div>

What I found was that this only seems to work in IE8+. Oddly, I had to ‘hardcode’ the value into the HTML page in order for it to display in IE6 and IE7:

<div ng-include src="'inc/header.htm'"></div>
<div ng-include src="'inc/footer.htm'"></div>

Notice there are single quotes wrapped in double quotes. Removing them makes it silently fail.

I tried a variety of different things, too. For instance, placing {{header}} in the page would display the path set by the controller, however,  trying <div ng-include=”{{header}}”></div> or <div ng-include=”‘{{header}}'”></div> only failed.

Also, the test results were consistent between Angular 1.0.8 (stable) and 1.2.0-rc.2 (the most recent release candidate as of this writing).

Here’s a demo

Here’s a  ZIP of the code

If you make any strides with this, do leave a comment!


Categories:HTML5 javascript
Tags:angular angularjs

Leave a Reply

Your email address will not be published. Required fields are marked *

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and three boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.


Archives