CODEWITHSUNDEEP
htmlangularjssvgangular-directiveangular-template
Oscar McCullough
Oscar McCullough

Reputation: 375

Directive not showing what I want on the HTML?

So I have a custom directive in AngularJS used to draw a circle via SVG. For some reason when the page loads, it doesn't draw the circle, nor does my text show up that's within the template.

Why is that?

Here's a plunker of what I have. plnkr.co/edit/1hHB2yXlhb3trMWPpXUC?

Here's the code of the directive and it's HTML. 

   <div>
    <b>Data Sources:</b>
    <b>  Auto-Tagged Events - </b>
<svg width="50" height="50">
    <circle cx="10" cy="10" r="5" fill="red"></circle>
</svg>

    <b>  GLIDR - </b>
    <svg width="50" height="50">
        <circle cx="10" cy="10" r="5" fill="blue"></circle>
    </svg>

    <b> J9/CIDNE</b>
    <svg width="50" height="50">
        <circle cx="10" cy="10" r="5" fill="yellow"></circle>
    </svg>
</div>



   (function(){
    'use strict';

    angular
        .module('app')
        .directive('legend', legend);

    /* @ngInject */

    function legend(){
        var ddo = {
            restrict: 'EA',
            templateURL: 'draw-circle.directive.html',
            link: link

        };

        return ddo;

        function link(scope, element, attrs){

        }

    }
    })();

Upvotes: 1

Views: 296

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

You made several mistakes while creating an app

  1. You should add ng-app="app" inside your page html tag
  2. Replace angularjs refernce from this to this
  3. templateURL should be templateUrl inside directive.
  4. templateUrl should be legend.directive.html like templateUrl: 'legend.directive.html',
  5. Add you directive inside body tag.

Working Plunkr

Upvotes: 1

Related Questions