は私が動的にSVGをインポートしたい

をSVG、私は角度のjsを使用し、私のHTMLページにSVGを表示するように管理することはできません動的にロード：私はこのコードを持っている： Directive.js：は私が動的にSVGをインポートしたい

angular.module ('SvgMapApp') directive ('svgMap', ['$ compile', function ($ compile) { 
     return { 
         restrict: 'A', 
         templateUrl: 'Scripts/widget.svg', 
         link: function (scope, element, attrs) { 
             
         } 
     } 
}]);

SVGを.HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="FrontEnd/Styles.css"> 
    <link rel="stylesheet" href="Scripts/bootstrap.min.js" /> 

</head> 
<body ng-app="SvgApplication" ng-controller="svgController"> 
    <h1> SVG widget</h1> 
    <div class="container"> 
     <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"></svg> 
    <div svg></div> 
</div> 
    <script src="Scripts/Controller.js"></script> 
    <script src="Scripts/Directives.js"></script> 
</body> 
</html>

は、あなたのアイデアを持ってください

出典

2017-12-26 zanouti

あなたはそもそも構文エラーがたくさんあります。あなたのコードはおそらくエラーをスローし、決して実行されません。

ディレクティブ宣言：

angular.module ('SvgMapApp') directive ('svgMap', ['$ compile', function ($ compile) {

は

angular.module('SvgMapApp').directive ('svgMap', ['$', 'compile', function ($, compile) {

compileであるべき（あなたはビルトイン$compileサービスを使用する場合）$compileでなければなりません。
<div svg></div>は、<div svg-map></div>である必要があります。 AngularJSは、ディレクティブ名svgMapをsvg-mapに変換します。これは、ディレクティブをレンダリングするためにテンプレートで使用する属性です。

また、templateUrlというSVG要素はロードされません。 HTMLテンプレートを作成し、内部にSVG要素をインライン展開する方がよいでしょう。

出典

2017-12-26 11:36:52

こんにちはすべてあなたはいいですか？ – zanouti

は私が動的にSVGをインポートしたい

答えて

関連する問題