動態加載的svg

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 個解決方案

解決方案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