AngularJS /動態 <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請求進行更新，然后每5秒更新一次。隨后會調用ngHtmlCompile進行讀取，並添加存儲為svg子元素的html。

如果有什么遺漏，可以問我。 第一篇文章，請隨時告訴我我是否根據要求做錯了什么。 最后，對不起，如果我的英語不好，我是法語。

謝謝你的幫助。

Answer 1

就像上面的評論所說（感謝Robert Longson ）， html（）函數在IE 11上不起作用 。 甚至在開發人員控制台中甚至都沒有出現問題。

作為解決方案（主要是，我只是用另一種方式做了），我將ngRoute模塊用於angular。

現在index.html只是<div ng-view>標記的容器，而我的<svg>放置在include.html中。 在這里，您可以在任何屬性中使用任何$scope var，就可以了。

我不接受這個答案，只要沒人能說我們不能在IE11上生成html ，因為這是我的初衷。

Answer 2

如果出現，則好像可以使用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 /動態 <svg> 不能在Microsoft IE 11中編譯為DOM

問題描述

2 個解決方案

解決方案1
0 已采納 2017-04-10 13:59:00

解決方案2
0 2017-04-10 14:21:13

AngularJS /動態 <svg> 不能在Microsoft IE 11中編譯為DOM

問題描述

2 個解決方案

解決方案1 0 已采納 2017-04-10 13:59:00

解決方案2 0 2017-04-10 14:21:13

解決方案1
0 已采納 2017-04-10 13:59:00

解決方案2
0 2017-04-10 14:21:13