动态加载的svg

Question

I want to dynamically import a svg, I can not manage to display the svg in my HTML page i used Angular js: i have this code : Directive.js : 我想动态导入一个svg，我无法在使用Angular js的HTML页面中显示该svg：我有以下代码：Directive.js：

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

Svg.Html : 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>

have you an idea please 你有个主意吗

Answer 1

You have a lot of syntax errors to begin with. 首先，您有很多语法错误。 Your code probably throws an error and never runs. 您的代码可能会引发错误，并且永远不会运行。

The directive declaration: 指令声明：

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

Should be 应该

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

compile should be $compile (if you want to use the built-in $compile service). compile应该是$compile （如果要使用内置的$ compile服务）。
<div svg></div> should be <div svg-map></div> . <div svg></div>应该是<div svg-map></div> 。 AngularJS transforms your directive name svgMap to svg-map and that's the attribute you have to use in your templates in order to render the directive. AngularJS将您的指令名称svgMap为svg-map ，这是您必须在模板中使用的属性才能呈现该指令。

Also would not load an SVG element as templateUrl . 也不会将SVG元素作为templateUrl加载。 You are better of creating an HTML template and inlining your SVG element inside it. 您最好创建一个HTML模板并在其中嵌入SVG元素。

动态加载的svg

问题描述

1 个解决方案

解决方案1
1 2017-12-26 11:36:52

动态加载的svg

问题描述

1 个解决方案

解决方案1 1 2017-12-26 11:36:52

解决方案1
1 2017-12-26 11:36:52