2017-04-10 12 views
0

私の問題は、AngularJS(最新v1.X)がIEで生成しているDOM svg要素に追加できないということです。AngularJS/Dynamic <svg> Microsoft IE 11でDOMにコンパイルされない

私は開発コンソールにエラーが表示されていません。 svgコンテナの幅と高さはAngularで設定されているので、私のアプリはロードされています(したがってコントローラも)。

アプリケーションが私の指示

... Firefoxの、クロム、錠剤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要求で1回更新され、その後5秒ごとに更新されますその後、ngHtmlCompileを呼び出してそれを読み込み、svgの子として格納されているhtmlを追加します。

何かが見つからない場合は、私に尋ねることができます。最初の投稿、私は私の要求に間違っていたかどうか教えてください。そして最後に、もし私の英語が壊れてしまったら、すみません、私はフランス語です。

ありがとうございました。

+0

あなたはSVG要素を作成するための.html()メソッドを使用することはできません。 IE11が出荷された後、これをサポートするように仕様が変更されました。したがって、新しいブラウザではこれをサポートしています。 –

+0

ご返信ありがとうございます。問題がどこにあるのかを知ってうれしいです。その後、IE11上で動作するための任意のソリューションですか?私はキャンバスを使うことができますが、それはキャンバスをサポートするためにevey draw関数を書き直すことを意味します。 –

+0

単にng-viewを使用することはできません。アプリケーションを使用してsvg要素をHTMLファイルに構築できますか?私はそれを試みるべきです。 –

答えて

0

上記のコメント(Robert Longson)のように、html()関数はIE 11では機能しません。それは何かが間違っているdevのコンソールに表示されません。

解決策(主に私は別のやり方をしました)として、ngRouteモジュールを使用しました。

index.htmlは、<div ng-view>タグのコンテナになりました。<svg>は、include.htmlに配置されています。この場合、任意の属性に任意の$scope varを使用できます。これで完了です。

この回答を受け入れることはできません。は私の本来の目的だったので、IE11にhtmlを生成できません。

0

Element.html()の代わりにElement.insertAdjacentHTML()を使用できるかのように表示されます。それはIE11で動作するようです。 IEで

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

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

+0

これは、{{{scopeVar}} 'のない要素に対して機能します。どのようにそれをコンパイルするかの任意のアイデア? DOMは壊れていて、すべてのHTMLタグは前のタグの中に作成されています...「afterbegin」のようなものは再帰的です。 –

関連する問題