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

【问题标题】：Directive not showing what I want on the HTML?指令没有在 HTML 上显示我想要的内容？
【发布时间】：2015-11-02 11:03:57
【问题描述】：

所以我在 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){

        }

    }
    })();

【问题讨论】：

标签： html angularjs svg angular-directive angular-template

【解决方案1】：

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

你应该在你的页面html标签中添加ng-app="app"
将 angularjs 引用从 this 替换为 this
templateURL 应该是 templateUrl 内部指令。
templateUrl 应该是 legend.directive.html 就像 templateUrl: 'legend.directive.html',
在body 标签内添加你的指令。

Working Plunkr

【讨论】：