fix(angular.widget): Allow widgets to be styled in IE8 and below

dmanek · IgorMinar · commit 163c799effd5 · 2011-10-24T23:28:36.000-07:00
Closes angular#584
diff --git a/regression/issue-584.html b/regression/issue-584.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html xmlns:ng="http://angularjs.org" xmlns:my="http://mynamespace.org">
+	<head>
+		<style>
+			my\:time {color:#00f;display:block;border:1px solid #ccc;background-color:#ddd;}
+		</style>
+		<script src="../build/angular.js" ng:autobind></script>
+		<script>
+			angular.widget('my:time', function(compileElement){
+			  compileElement.css('display', 'block');
+			  return function(linkElement) {  	
+			    function update() {
+			      linkElement.text('Current time is: ' + new Date());
+			      setTimeout(update, 1000);
+			    }
+			    update();
+			  };
+			});
+		</script>
+	</head>
+	<body>
+	  <my:time></my:time>
+	</body>
+</html>
diff --git a/src/Angular.js b/src/Angular.js
@@ -51,6 +51,22 @@ if ('i' !== 'I'.toLowerCase()) {
 
 function fromCharCode(code) { return String.fromCharCode(code); }
 
+/**
+ * Creates the element for IE8 and below to allow styling of widgets
+ * (http://ejohn.org/blog/html5-shiv/). This hack works only if angular is 
+ * included synchronously at the top of the document before IE sees any 
+ * unknown elements. See regression/issue-584.html.
+ *
+ * @param {string} elementName Name of the widget.
+ * @returns {string} Lowercased string.
+ */
+function shivForIE(elementName) {
+  elementName = lowercase(elementName);
+  if (msie < 9 && elementName.charAt(0) != '@') { // ignore attr-widgets
+    document.createElement(elementName);
+  }
+  return elementName;
+}
 
 var _undefined        = undefined,
     _null             = null,
@@ -91,7 +107,7 @@ var _undefined        = undefined,
     /** @name angular.directive */
     angularDirective  = extensionMap(angular, 'directive'),
     /** @name angular.widget */
-    angularWidget     = extensionMap(angular, 'widget', lowercase),
+    angularWidget     = extensionMap(angular, 'widget', shivForIE),
     /** @name angular.filter */
     angularFilter     = extensionMap(angular, 'filter'),
     /** @name angular.service */
