AngularJS/Dynamic <svg> 未在 Microsoft IE 11 中编译为 DOM

Question

我的问题是我的 AngularJS（最新的 v1.X）无法添加到我在 IE 中从中生成的 DOM svg 元素。

我在开发控制台中没有显示任何错误。我的应用程序已加载（因此，控制器），因为 svg 容器的宽度和高度由 Angular.

设置

该应用程序在 Firefox、Chrome、平板电脑 Chrome 和 Android 浏览器上运行良好...

我的指令：

'use strict';
My_App.directive('ngHtmlCompile', ["$compile", function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.ngHtmlCompile);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

我的HTML:

<!DOCTYPE html>
<html lang="fr" ng-app="My_App" ng-controller="App">
    <head>
        <meta charset="UTF-8">
        <title>My App</title>
        <style>
            * { margin:0; padding:0; @import url('https://fonts.googleapis.com/css?family=Open+Sans'); font-family: 'Open Sans', sans-serif; font-weight: bold; } /* Retire les espaces autour du canvas */

            html, body { width:100%; height:100%; } /* Override le comportement des navigateurs */

            svg { display:block;background-color: dimgrey;} /* Retire la scrollbar */

            svg text {
                cursor: default;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            ::selection, ::-moz-selection{background: none;}

        </style>
        <script type="text/javascript" src="angular/angular.min.js"></script>
        <script type="text/javascript" src="js/MyApp.js"></script>
    </head>
    <body>
        <svg id="MyApp" ng-cloak ng-attr-width="{{svg.width}}" ng-attr-height="{{svg.height}}" ng-html-compile="html"></svg>
    </body>
</html>

控制器端，我的 $scope.html 在启动时用 XHR 请求更新一次，然后在 it.th 之后每 5 秒调用一次 ngHtmlCompile 来读取它，并添加 html 存储在 svg 的子项中。

有什么遗漏可以问我。首先 post，如果我的请求有任何错误，请随时告诉我。最后，对不起，如果我的英语不好，我是法国人。

感谢您的帮助。

Answer 1

就像上面的评论所说（感谢 Robert Longson），html() 函数在 IE 11 上不起作用。它甚至没有出现在开发控制台中，表明有问题。

作为解决方案（主要是，我只是换了一种方式），我使用 ngRoute 模块 作为 angular.

index.html现在只是一个<div ng-view>标签的容器，而我的<svg>放在一个include.html中。在此，您可以在任何属性中使用任何 $scope var，您就完成了。

只要没有人知道我们不能在 IE11 上生成 html，我就不会接受这个答案，因为这是我最初的目的。

Answer 2

If 看起来好像您可以使用 Element.insertAdjacentHTML() 而不是 Element.html()。它似乎适用于 IE11。

var svgStr='<svg><rect width="100%" height="100%" fill="red"/></svg>';

var div = document.getElementById("test");
div.insertAdjacentHTML('afterbegin', svgStr);

<div id="test"></div>

AngularJS/Dynamic <svg> 未在 Microsoft IE 11 中编译为 DOM

AngularJS/Dynamic <svg> not compiling into DOM in Microsoft IE 11

internet-explorer

svg

angularjs

microsoft-edge