ANGULARJS Study notes--ie compatibility compatible old version IE

Original address: http://docs.angularjs.org/guide/ie

Internet Explorer Compatibility

First, the overall

This article describes Internet Explorer (IE) handling custom HTML attributes, the attributes of tags (which can be understood as "particularly bad nature"). If we're going to make the app compatible with IE8 and the following versions, you can continue looking down.

Ii. Short Version (brief)

In order for our angular application to work on IE, make sure that:

1. Introduce json.stringify on demand (this is required for IE7 or below). We can use JSON2 (HTTPS://GITHUB.COM/DOUGLASCROCKFORD/JSON-JS) or JSON3 (http://bestiejs.github.com/json3/).

2. Do not use custom tags, such as <ng:view> (in lieu of a property version, such as <div ng-view>). If you still want to use it, see 3rd.

3. If you really want to use a custom label, then you have to do the following steps to let old ie know your custom tags.

Attention is paid to:

 
 

  
  
 
   
Xmls:ng-Namespaces-a namespace is required for each custom label that we plan to use.
 
   
Document.createelement ("Custom label name")-Custom label name creation-because this is a problem with the older version of IE, we need to judge the comment via IE (<!--[if LTE IE 8]>...<! [endif]-->) to special treatment. For each namespace or non-HTML default tag, this pre-definition is required to make IE not be silly (for example, no style ...). ）。
 
  
 
 
Three, Long Version (Details)
IE has a problem with non-standard HTML tags. This can generally be an atmosphere of two classes (with or without namespaces), and each class has his own solution.

 
 

  
  
 
   
If the label name begins with "my:", it will be treated as a namespace and must have a namespace definition ( 
   
If the label does not have a namespace (xx: Start), but is not a standard HTML, it needs to be declared by document.createelement ("tag name").
 
   
If we are going to define a style for a custom tag, we have to use Document.createelement ("tag name") to customize it, regardless of the XML namespace (experimental proof, regardless of XML The namespace means that there is a good chance of not having a custom label with a namespace.
 
  
 
 
Iv. The good News (good News)
The good news is that this restriction is only for the element name and has no effect on the property name. So there is no need for special handling of custom attributes (<div> My-tag your:tag></div>).
V. What happens if I fail to do this? (What happens if you don't do the processing?!) ）
Suppose we have a nonstandard HTML tag (with the same result for My:tag or My-tag). However, after the test, you will find that the namespace method does not have this annoyance.
In general, the DOM structure will be converted to a bit:
 
  
 
  
   
 
    
 
     
#document    +- HTML        +- BODY            +- mytag                +-#text: some text
 
    
 
   
 
 
  
What we expect is that the BODY element has a mytag child element, and MyTag has a text sub-element "some text".
But IE does not do so (if corrective action is not included)!

 
  
 
  
   
 
    
 
     
 #document  &NBSP;&NBSP;&NBSP;&NBSP;  +-HTML  &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;  +-BODY                 +-mytag                  +-  < Code class= "JavaScript preprocessor" > #text: some text                 +-/mytag 
 
    
 
   
 
 
  
Inside IE, the body will have 3 child elements:
1. A self-closing "MyTag", similar to <br/>. The "/" at the end is optional, but the <br> tag does not allow any child elements, so the browser divides it into <br>, some text, </br> three sibling elements instead of a separate <br> element containing some The text element.
2. A text node "some text". This should have been a child node of the MyTag element, not its sibling node.
3. A false self-closing label "/mytag", which says it is wrong, is because the element name is not allowed to contain "/" characters (in the end should be allowed <br/>). In addition, the closed element should not be part of the DOM (should not appear as an element) because it is used only as a boundary to delineate the DOM structure.
VI. CSS styling of custom tag Names (CSS style definition for customized labels)
If you want the CSS selector to be valid for a custom element, then the custom element must be pre-defined by Document.createelement ("element name"), regardless of the XML namespace (the experiment proves that There is no need to have an XML namespace?! ）
Here is an example of a custom label style definition:
 
<! DOCTYPE html>
ANGULARJS Study notes--ie compatibility compatible old version IE