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的子节点。

如果缺少任何东西，你可以问我。在第一篇文章中，请随时告诉我我的请求是否有任何问题。最后，如果我的英语被打破，我很抱歉，我是法语。

感谢您的帮助。

在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，因为这是我最初的目的。

答

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

它适用于没有{{scope> range}}的元素。任何想法如何编译它呢？并且DOM被破坏，每个html标签都在前一个标签内创建......看起来像'afterbegin'是递归的。 –

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

相关推荐

AngularJS/Dynamic