` instead), or + + 2. if you **do use** custom element tags, then you must take these steps to make IE happy: + +

+  
+    
+      
+    
+    
+      ...
+    
+  
+

+ +The **important** parts are: + + * `xmlns:ng` - *namespace* - you need one namespace for each custom tay you are planning on + using. + + * `document.createElement(yourTagName)` - *creation of custom tag names* - Since this is an + issue only for older version of IE you need to load it conditionally. For each tag which does + not have namespace and which is not defined in HTML you need to pre-declare it to make IE + happy. + + +# Long Version + +IE has an issues with element tag names which are not standard HTML tag names. These fall into two +categories, and each category has its own fix. + + * If the tag name starts with `my:` prefix than it is considered an XML namespace and must + have corresponding namespace declaration on `` + + * If the tag has no `:` but it is not a standard HTML tag, then it must be pre-created using + `document.createElement('my-tag')` + + * If you have are planning on styling the custom tag with CSS selectors, then it must be + pre-created using `document.createElement('my-tag')` regardless of XML namespace. + + +## The Good News + +The good news is that these restrictions only apply to element tag names, and not to element +attribute names. So this requires no special handling in IE: `

`. + + +## What happens if I fail to do this? + +Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same +result): + +

+  
+    
+      some text
+    
+  
+

+ +It should pares into the following DOM: + +

+#document
+  +- HTML
+     +- BODY
+        +- mytag
+           +- #text: some text
+

+ +The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has +the text `some text`. + +But this is not what IE does (if the above fixes are not included): + +

+#document
+  +- HTML
+     +- BODY
+        +- mytag
+        +- #text: some text
+        +- /mytag
+

+ +In IE, the behavior is that the `BODY` element has three children: + + 1. A self closing `mytag`. Example of self closing tag is `
`. The trailing `/` is optional, + but the `
` tag is not allowed to have any children, and browsers consider `
some + text
` as three siblings not a `
` with `some text` as child. + + 2. A text node with `some text`. This should have been a child of `mytag` above, not a sibling. + + 3. A corrupt self closing `/mytag`. This is corrupt since element names are not allowed to have + the `/` character. Furthermore this closing element should not be part of the DOM since it is + only used to delimitate the structure of the DOM. + + +## CSS Styling of Custom Tag Names + +The to make CSS selector work with custom elements the custom element name must be shived with the +`document.createElement('my-tag')` regardless of XML namespace. + +

+ + + diff --git a/docs/src/dom.js b/docs/src/dom.js index bda90373..e5320c5f 100644 --- a/docs/src/dom.js +++ b/docs/src/dom.js @@ -19,7 +19,8 @@ function DOM() { var INLINE_TAGS = { i: true, - b: true + b: true, + a: true }; DOM.prototype = { diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js index 6cbf816c..1cbd968e 100644 --- a/docs/src/ngdoc.js +++ b/docs/src/ngdoc.js @@ -367,18 +367,14 @@ Doc.prototype = { dom.h('Usage', function() { var restrict = self.restrict || 'AC'; if (restrict.match(/E/)) { - dom.text('as element'); + dom.text('as element (see '); + dom.tag('a', {href:'guide/ie'}, 'IE restrictions'); + dom.text(')'); dom.code(function() { dom.text('<'); dom.text(self.shortName); - (self.param||[]).forEach(function(param){ - dom.text('\n '); - dom.text(param.optional ? ' [' : ' '); - dom.text(param.name); - dom.text(BOOLEAN_ATTR[param.name] ? '' : '="..."'); - dom.text(param.optional ? ']' : ''); - }); - dom.text('>\n'); }); @@ -389,9 +385,7 @@ Doc.prototype = { dom.code(function() { dom.text('<' + element + ' '); dom.text(self.shortName); - if (self.param.length) { - dom.text('="' + self.param[0].name + '"'); - } + renderParams('\n ', '="', '"', true); dom.text('>\n ...\n'); dom.text(''); }); @@ -402,9 +396,7 @@ Doc.prototype = { dom.code(function() { dom.text('<' + element + ' class="'); dom.text(self.shortName); - if (self.param.length) { - dom.text(': ' + self.param[0].name + ';'); - } + renderParams(' ', ': ', ';', true); dom.text('">\n ...\n'); dom.text(''); }); @@ -414,6 +406,27 @@ Doc.prototype = { }); self.method_properties_events(dom); + + function renderParams(prefix, infix, suffix, skipSelf) { + (self.param||[]).forEach(function(param) { + var skip = skipSelf && (param.name == self.shortName || param.name.indexOf(self.shortName + '|') == 0); + if (!skip) { + dom.text(prefix); + dom.text(param.optional ? '[' : ''); + var parts = param.name.split('|'); + dom.text(parts[skipSelf ? 0 : 1] || parts[0]); + } + if (BOOLEAN_ATTR[param.name]) { + dom.text(param.optional ? ']' : ''); + } else { + dom.text(BOOLEAN_ATTR[param.name] ? '' : infix ); + dom.text(('{' + param.type + '}').replace(/^\{\'(.*)\'\}$/, '$1')); + dom.text(param.optional ? ']' : ''); + dom.text(suffix); + } + }); + } + }, html_usage_filter: function(dom){ @@ -455,7 +468,7 @@ Doc.prototype = { dom.text('\n '); dom.text(param.optional ? ' [' : ' '); dom.text(param.name); - dom.text(BOOLEAN_ATTR[param.name] ? '' : '="..."'); + dom.text(BOOLEAN_ATTR[param.name] ? '' : '="{' + param.type + '}"'); dom.text(param.optional ? ']' : ''); }); dom.text('>'); -- cgit v1.2.3