Question

我想动态导入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：

<!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>

请你有个想法

Answer 1

您开始时会遇到很多语法错误。您的代码可能会抛出错误并且永远不会运行。

指令声明：

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，并且您必须在模板中使用该属性才能呈现指令。

也不会将SVG元素加载为templateUrl。您最好创建一个HTML模板并在其中内嵌SVG元素。

动态加载svg

1 个答案: