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

Question

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

这是为什么？

这是我所拥有的一个 plunker。 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

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

您应该在页面内添加 ng-app="app" html 标签
替换 angularjs 来自 this to this
templateURL 应该是 templateUrl 内部指令。
templateUrl 应该是 legend.directive.html 就像 templateUrl: 'legend.directive.html',
在 body 标签内添加指令。

Working Plunkr

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

Directive not showing what I want on the HTML?

html

svg

angularjs

angular-template

angular-directive