feat(): IE 8 Compatibility

Gruntfile.js

@@ -84,8 +84,16 @@ module.exports = function(grunt) {
       dist_tpls:{
         src:['<%= dist %>/<%= filename %>-tpls-<%= pkg.version %>.js'],
         dest:'<%= dist %>/<%= filename %>-tpls-<%= pkg.version %>.min.js'
+      },
+      dist_ieshiv: {
+        src: ['<%= dist %>/ieshiv-<%= pkg.version %>.js'],
+        dest: '<%= dist %>/ieshiv-<%= pkg.version %>.min.js'
       }
     },
+    ieshiv: {
+      src: 'misc/ieshiv.tpl.js',
+      dest: '<%= dist %>/ieshiv-<%= pkg.version %>.js'
+    },
     html2js: {
       dist: {
         options: {
@@ -254,7 +262,26 @@ module.exports = function(grunt) {
     grunt.config('concat.dist_tpls.src', grunt.config('concat.dist_tpls.src')
                  .concat(srcFiles).concat(tpljsFiles));
 
-    grunt.task.run(['concat', 'uglify']);
+    grunt.task.run(['concat', 'ieshiv', 'uglify']);
+  });
+
+  grunt.registerTask('ieshiv', 'Create the ieshiv file, based on the current build', function() {
+    var directiveNames = [];
+    var directiveDeclarations = grunt.file.read(grunt.config('concat.dist.dest')).match(/\.directive\([^'"]*('|")[^'"]*('|")/g);
+
+    directiveDeclarations.forEach(function(match) {
+      directiveNames.push(/('|")([^'"]+)('|")/.exec(match)[2]);
+    });
+
+    grunt.file.write(
+      grunt.config('ieshiv.dest'),
+      grunt.template.process(grunt.file.read(grunt.config('ieshiv.src')), {data: {
+        directives: '"' + directiveNames.join('", "') + '"',
+        version : grunt.config('pkg.version')
+      }})
+    );
+
+    grunt.log.writeln('File "' + grunt.config('ieshiv.dest') + '" created.');
   });
 
   grunt.registerTask('test', 'Run tests on singleRun karma server', function() {

karma.conf.js

@@ -10,12 +10,16 @@ files = [
   'misc/test-lib/angular.js',
   'misc/test-lib/angular-mocks.js',
   'misc/test-lib/helpers.js',
+  'misc/test-lib/es5-shim.min.js',
+  'dist/ieshiv-*.js',
   'src/**/*.js',
   'template/**/*.js'
 ];
 
 // list of files to exclude
 exclude = [
+  // exclude the ieshiv minified version to prevent loading it twice
+  'dist/ieshiv-*.min.js'
 ];
 
 // Start these browsers, currently available:

misc/demo/index.html

@@ -6,6 +6,15 @@
     <meta name="description" content="AngularJS (Angular) native directives for Twitter Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: <% demoModules.forEach(function(module) { %><%= module.displayName %>, <% }); %>">
     <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" />
 
+    <!--[if lt IE 9]>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/1.2.4/es5-shim.min.js"></script>
+        <script src="ieshiv-<%= pkg.version%>.min.js"></script>
+        <script>
+            document.createElement('header');
+            document.createElement('section');
+        </script>
+    <![endif]-->
+
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
     <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script>
@@ -157,6 +166,20 @@ <h3>Installation</h3>
                        <code>angular.module('myModule', ['ui.bootstrap']);</code>
                     </p>
                     <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
+                    <h3>IE8 compatibility</h3>
+                    <p>To be able to use this library on Internet Explorer 8 you must also include:
+                    </p>
+                    <ul>
+                        <li>a <a href="http://en.wikipedia.org/wiki/HTML5_Shiv">shim/shiv</a> library of your choice
+                            (on this site we are using <a href="https://github.com/kriskowal/es5-shim">es5-shim</a>)</li>
+                        <li>the <code>ieshiv-*.js</code> file distributed alongside this library</li>
+                    </ul>
+                    <p>You can include them inside your site like this:
+                    </p>
+                    <pre ng-non-bindable><code data-language="html"><!--[if lt IE 9]>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/1.2.4/es5-shim.min.js"></script>
+    <script src="ieshiv-<%= pkg.version%>.min.js"></script>
+<![endif]--></code></pre>
                 </div>
             </div>
         </section>

misc/ieshiv.tpl.js

@@ -0,0 +1,39 @@
+// READ: http://docs.angularjs.org/guide/ie
+
+// The ieshiv takes care of ui.bootstrap.* directives; it's dynamically generated
+// using the current version of the framework
+
+//  <!--[if lt IE 9]>
+//      <script src="ieshiv-<%= version %>.min.js"></script>
+//  <![endif]-->
+//
+// Version: <%= version %>
+//
+
+(function () {
+
+  var tags = [<%= directives %>];
+
+  var toCustomElements = function (str) {
+    var result = [];
+    var dashed = str.replace(/([A-Z])/g, function ($1) {
+      return " " + $1.toLowerCase();
+    });
+    var tokens = dashed.split(' ');
+    var dirname = tokens.join('-');
+
+    result.push(dirname);
+    result.push("x-" + dirname);
+    result.push("data-" + dirname);
+    return result;
+  };
+
+  for (var i = 0, tlen = tags.length; i < tlen; i++) {
+    var customElements = toCustomElements(tags[i]);
+    for (var j = 0, clen = customElements.length; j < clen; j++) {
+      var customElement = customElements[j];
+      document.createElement(customElement);
+    }
+  }
+
+})();

src/accordion/test/accordionSpec.js

@@ -116,9 +116,12 @@ describe('accordion', function () {
     beforeEach(inject(function(_$rootScope_, _$compile_) {
       scope = _$rootScope_;
       $compile = _$compile_;
+
+      element = angular.element('<div>').appendTo(document.body);
     }));
 
     afterEach(function () {
+      element.remove();
       element = groups = scope = $compile = undefined;
     });
 
@@ -128,16 +131,12 @@ describe('accordion', function () {
           "<accordion>" +
             "<accordion-group heading=\"title 1\">Content 1</accordion-group>" +
             "<accordion-group heading=\"title 2\">Content 2</accordion-group>" +
-            "</accordion>";
-        element = angular.element(tpl);
-        angular.element(document.body).append(element);
+          "</accordion>";
+        element.html(tpl);
         $compile(element)(scope);
         scope.$digest();
         groups = element.find('.accordion-group');
       });
-      afterEach(function() {
-        element.remove();
-      });
 
       it('should create accordion groups with content', function () {
         expect(groups.length).toEqual(2);
@@ -175,7 +174,7 @@ describe('accordion', function () {
           "<accordion>" +
             "<accordion-group ng-repeat='group in groups' heading='{{group.name}}'>{{group.content}}</accordion-group>" +
           "</accordion>";
-        element = angular.element(tpl);
+        element.html(tpl);
         model = [
           {name: 'title 1', content: 'Content 1'},
           {name: 'title 2', content: 'Content 2'}
@@ -220,8 +219,8 @@ describe('accordion', function () {
           "<accordion>" +
             "<accordion-group heading=\"title 1\" is-open=\"open1\">Content 1</accordion-group>" +
             "<accordion-group heading=\"title 2\" is-open=\"open2\">Content 2</accordion-group>" +
-            "</accordion>";
-        element = angular.element(tpl);
+          "</accordion>";
+        element.html(tpl);
         scope.open1 = false;
         scope.open2 = true;
         $compile(element)(scope);
@@ -241,21 +240,16 @@ describe('accordion', function () {
           "<accordion>" +
             "<accordion-group heading=\"title 1\" is-open=\"open1\"><div ng-repeat='item in items'>{{item}}</div></accordion-group>" +
             "<accordion-group heading=\"title 2\" is-open=\"open2\">Static content</accordion-group>" +
-            "</accordion>";
-        element = angular.element(tpl);
+          "</accordion>";
+        element.html(tpl);
         scope.items = ['Item 1', 'Item 2', 'Item 3'];
         scope.open1 = true;
         scope.open2 = false;
-        angular.element(document.body).append(element);
         $compile(element)(scope);
         scope.$digest();
         groups = element.find('.accordion-group');
       });
 
-      afterEach(function() {
-        element.remove();
-      });
-
       it('should have visible group body when the group with isOpen set to true', function () {
         expect(findGroupBody(0)[0].clientHeight).not.toBe(0);
         expect(findGroupBody(1)[0].clientHeight).toBe(0);
@@ -271,7 +265,8 @@ describe('accordion', function () {
               'Body' +
             '</accordion-group>' +
           '</accordion>';
-        element = $compile(tpl)(scope);
+        element.html(tpl);
+        $compile(element)(scope);
         scope.$digest();
         groups = element.find('.accordion-group');
       });
@@ -285,10 +280,20 @@ describe('accordion', function () {
     });
 
     describe('accordion-heading, with repeating accordion-groups', function() {
-      it('should clone the accordion-heading for each group', function() {
-        element = $compile('<accordion><accordion-group ng-repeat="x in [1,2,3]"><accordion-heading>{{x}}</accordion-heading></accordion-group></accordion>')(scope);
+      beforeEach(function() {
+        var tpl =
+          '<accordion>' + 
+            '<accordion-group ng-repeat="x in [1,2,3]">' +
+              '<accordion-heading>{{x}}</accordion-heading>' +
+            '</accordion-group>' +
+          '</accordion>';
+        element.html(tpl);
+        $compile(element)(scope);
         scope.$digest();
         groups = element.find('.accordion-group');
+      });
+
+      it('should clone the accordion-heading for each group', function() {
         expect(groups.length).toBe(3);
         expect(findGroupLink(0).text()).toBe('1');
         expect(findGroupLink(1).text()).toBe('2');

src/carousel/carousel.js

@@ -38,7 +38,7 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
       if (self.currentSlide && angular.isString(direction) && !$scope.noTransition && nextSlide.$element) { 
         //We shouldn't do class manip in here, but it's the same weird thing bootstrap does. need to fix sometime
         nextSlide.$element.addClass(direction);
-        nextSlide.$element[0].offsetWidth = nextSlide.$element[0].offsetWidth; //force reflow
+        var useless = nextSlide.$element[0].offsetWidth; //force reflow
 
         //Set all other slides to stop doing their stuff for the new transition
         angular.forEach(slides, function(slide) {