Улучшить эту статьюСовместимость с Internet Explorer

Примечание: AngularJS 1.3 прекращает поддержку IE8. Подробнее об этом читайте на нашем блоге. AngularJS 1.2 продолжит поддерживать IE8, но основная команда не планирует уделять время устранению проблем, специфичных для IE8 или более ранних версий.

Этот документ описывает особенности Internet Explorer (IE) при работе с пользовательскими атрибутами и тегами HTML. Прочитайте этот документ, если вы планируете развернуть ваше приложение Angular в IE8 или более ранних версиях.

В настоящее время проект поддерживает и будет пытаться исправить ошибки для IE9 и выше. Сервер непрерывной интеграции выполняет все тесты на IE9, IE10 и IE11. Смотрите Travis CI и ci.angularjs.org.

Мы не проводим тесты на IE8 и ниже. Подмножество функций AngularJS может работать в этих браузерах, но вам нужно протестировать и решить, работает ли оно в вашем конкретном приложении.

Краткое описание

Чтобы заставить ваше приложение Angular работать в IE, убедитесь, что:

Вы полифиллите JSON.stringify для IE7 и ниже. Вы можете использовать JSON2 или JSON3 полифиллы для этого.

<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <head>
    <!--[if lte IE 7]>
      <script src="/path/to/json2.js"></script>
    <![endif]-->
  </head>
  <body>
    ...
  </body>
</html>

Добавьте id="ng-app" в корневой элемент в сочетании с атрибутом ng-app
```
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
</html>
```
вы не используете пользовательские теги элементов, такие как <ng:view> (вместо этого используйте атрибутную версию <div ng-view>), или

если вы используете пользовательские теги элементов, то вы должны выполнить следующие шаги, чтобы сделать IE 8 и ниже счастливыми:

<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  <head>
    <!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');

        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
      </script>
    <![endif]-->
  </head>
  <body>
    ...
  </body>
</html>

Используйте теги ng-style вместо тегов style="{{ someCss }}". Последние работают в Chrome и Firefox, но не работают в Internet Explorer <= 11 (самая последняя версия на момент написания).

Важные части:

xmlns:ng - пространство имен - вам нужно одно пространство имен для каждого пользовательского тега, который вы планируете использовать.
document.createElement(yourTagName) - создание имен пользовательских тегов - Поскольку эта проблема возникает только для старых версий IE, вам нужно загрузить ее условно. Для каждого тега, у которого нет пространства имен и который не определен в HTML, необходимо предварительно объявить его, чтобы IE работал корректно.

Подробное описание

IE имеет проблемы с именами тегов элементов, которые не являются стандартными именами тегов HTML. Они делятся на две категории, и для каждой категории есть собственное решение.

Если имя тега начинается с my: префикса, то оно рассматривается как пространство имен XML и должно иметь соответствующее объявление пространства имен в <html xmlns:my="ignored">
Если у тега нет : префикса, но он не является стандартным тегом HTML, то он должен быть предварительно создан с помощью document.createElement('my-tag')
Если вы планируете стилизовать пользовательский тег с помощью CSS-селекторов, то он должен быть предварительно создан с помощью document.createElement('my-tag') независимо от пространства имен XML.

Хорошие новости

Хорошая новость заключается в том, что эти ограничения относятся только к именам тегов элементов, а не к именам атрибутов элементов. Поэтому для этого в IE не требуется специальная обработка: <div my-tag your:tag></div>.

Что произойдёт, если я этого не сделаю?

Предположим, у вас есть HTML с неизвестным тегом mytag (это также может быть my:tag или my-tag с тем же результатом):

<html>
  <body>
    <mytag>some text</mytag>
  </body>
</html>

Он должен быть проанализирован в следующий DOM:

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

Ожидаемое поведение заключается в том, что элемент BODY имеет дочерний элемент mytag, который в свою очередь содержит текст some text.

Но в IE это не так (если вышеуказанные исправления не включены):

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

В IE поведение таково, что элемент BODY имеет три дочерних элемента:

Самозакрывающийся mytag. Пример самозакрывающегося тега — <br/>. Заключительный / необязателен, но тег <br> не может иметь дочерних элементов, и браузеры рассматривают <br>some text</br> как три соседних элемента, а не <br> с some text как дочерним элементом.
Узел текста с some text. Он должен был быть дочерним элементом mytag выше, а не соседним элементом.
Разрушенный самозакрывающийся /mytag. Это повреждено, так как имена элементов не могут содержать символ /. Кроме того, этот закрывающий элемент не должен быть частью DOM, поскольку он используется только для определения структуры DOM.

Стиль CSS пользовательских имен тегов

Чтобы селекторы CSS работали с пользовательскими элементами, пользовательский элемент должен быть предварительно создан с помощью document.createElement('my-tag') независимо от пространства имен XML.

<html xmlns:ng="needed for ng: namespace">
  <head>
    <!--[if lte IE 8]>
      <script>
        // needed to make ng-include parse properly
        document.createElement('ng-include');

        // needed to enable CSS reference
        document.createElement('ng:view');
      </script>
    <![endif]-->
    <style>
      ng\:view {
        display: block;
        border: 1px solid red;
      }

      ng-include {
        display: block;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <ng:view></ng:view>
    <ng-include></ng-include>
    ...
  </body>
</html>

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.2.32/docs/guide/ie