私の問題は、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を追加します。
何かが見つからない場合は、私に尋ねることができます。最初の投稿、私は私の要求に間違っていたかどうか教えてください。そして最後に、もし私の英語が壊れてしまったら、すみません、私はフランス語です。
ありがとうございました。
あなたはSVG要素を作成するための.html()メソッドを使用することはできません。 IE11が出荷された後、これをサポートするように仕様が変更されました。したがって、新しいブラウザではこれをサポートしています。 –
ご返信ありがとうございます。問題がどこにあるのかを知ってうれしいです。その後、IE11上で動作するための任意のソリューションですか?私はキャンバスを使うことができますが、それはキャンバスをサポートするためにevey draw関数を書き直すことを意味します。 –
単にng-viewを使用することはできません。アプリケーションを使用してsvg要素をHTMLファイルに構築できますか?私はそれを試みるべきです。 –