AngularJS/Dynamic <svg>未在Microsoft IE中編譯爲DOM 11

我的問題是我的AngularJS（最新v1.X）無法添加到我在IE中從它生成的DOM svg元素。AngularJS/Dynamic <svg>未在Microsoft IE中編譯爲DOM 11

我沒有錯誤顯示在開發控制檯。因爲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>

在控制器端，my $ scope.html在啓動時用XHR請求更新一次，然後每5秒更新一次然後調用ngHtmlCompile來讀取它，並將存儲的html添加爲svg的子節點。

如果缺少任何東西，你可以問我。在第一篇文章中，請隨時告訴我我的請求是否有任何問題。最後，如果我的英語被打破，我很抱歉，我是法語。

感謝您的幫助。

來源

2017-04-10 Brice Taillefer

在IE不能使用生成.html（）方法來創建SVG元素。在IE11出貨後，規範改爲支持這一點。較新的瀏覽器確實支持這一點。 –

感謝您的回覆。我很高興知道問題現在在哪裏。任何解決方案，它在IE11上工作呢？我可以使用畫布，但這意味着要重寫evey畫圖功能來支持畫布。 –

我不能只使用ng-view，並使用應用程序在html文件中構建svg元素嗎？我應該嘗試一下。 –

像上面說的評論（感謝Robert Longson），html（）函數在IE 11上不起作用。它甚至沒有出現在開發控制檯中，有什麼錯誤。作爲一個解決方案（主要是，我只是做了另一種方式），我使用ngRoute模塊作爲角度。

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

我不接受這個答案，只要沒有人知道我們無法在IE11上生成html，因爲這是我最初的目的。

來源

2017-04-10 13:59:00

如果看起來好像可以使用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>

來源

2017-04-10 14:21:13

它適用於沒有{{scope> range}}的元素。任何想法如何編譯它呢？並且DOM被破壞，每個html標籤都在前一個標籤內創建......看起來像'afterbegin'是遞歸的。 –

AngularJS/Dynamic <svg>未在Microsoft IE中編譯爲DOM 11

回答

相關問題