指令没有在HTML上显示我想要的内容？

Question

所以我在AngularJS中有一个自定义指令，用于通过SVG绘制一个圆圈。出于某种原因，当页面加载时，它不会绘制圆圈，我的文本也不会显示在模板中。

为什么？

这是我所拥有的东西。 plnkr.co/edit/1hHB2yXlhb3trMWPpXUC?

这是指令的代码及其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){

        }

    }
    })();

Answer 1

您在创建应用时犯了几个错误

1. 您应在页面html标记
中添加ng-app="app"
2. 将angularjs引用从this替换为this
3. templateURL应在templateUrl指令内。
4. templateUrl应为legend.directive.html，如templateUrl: 'legend.directive.html',
5. 在body标记内添加指令。

Working Plunkr