CODEWITHSUNDEEP
javascriptangularjs
zanouti
zanouti

Reputation: 1

Loaded dynamically svg

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 :

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>

have you an idea please

Upvotes: 0

Views: 65

Answers (1)

Tsvetan Ganev
Tsvetan Ganev

Reputation: 8856

You have a lot of syntax errors to begin with. Your code probably throws an error and never runs.

  1. The directive declaration:

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

    Should be

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

  2. compile should be $compile (if you want to use the built-in $compile service).

  3. <div svg></div> should be <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.

Also would not load an SVG element as templateUrl. You are better of creating an HTML template and inlining your SVG element inside it.

Upvotes: 1

Related Questions