ANGULARJS Study notes--ie compatibility compatible old version IE

Short Version(brief)

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

1. Introduce json.stringifyon 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, take a look at point 3 .

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 pass IE Judging Comments (<!--[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 ...). ）。
 
  
 
 
 
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 is treated as a namespace and must have a namespace definition ("ignored  ">). 
 
  
  

  
If the label does not have a namespace (xx: start), but not a standard HTML , it needs to pass document.createelement (" Label name ") to declare. 
 
  
  

  
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 XML namespaces (experiments have shown thatregardless of XML namespace is probably meant to be: Do not have a custom label with a namespace). 
 
 
 
 
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>). 
 
What happens if I fail to does 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,andMyTag has a text sub-element "some text  ". 
 
 
But IE does not do so (if corrective action is not included)! 
 
 
  
 
  
   
 
    
 
     
#document      +- HTML          +- BODY               +- mytag               +- #text: some text               +- /mytag
 
    
 
   
 
 
  
 
Inside IE , theBODY will have 3 child elements:
 
 1.  a self-closing " mytag  ", Similar to  <BR/>   / " is optional, but  <br>   <BR>  ,  some text  ,  </BR>   three sibling elements, instead of a separate  <BR>   some 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 wrong Self-closing label " /mytag", saying it is wrong 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 pass the document.createelement ("element name")  Pre-defined,regardless of XML namespace(the experiment proves that there is no XML namespace in this case?! )
 
Here is an example of a custom label style definition:
 
<! doctype html> 

ANGULARJS Study notes--ie compatibility compatible old version IE