简单的指令不起作用

Question

尝试为我的标题创建一个指令，但它似乎不起作用。我有以下内容：

.directive("headerStandard", function() {
    return {
        restrict: "E",
        template: "test"
    };
    })

这是一个名为myApp.directives的角度模块，它还包含模板中其他预先安装的指令，这些指令可以正常工作。

在我的index.html页面中（也引用了JS文件指令的正确地址）我试试：

<headerStandard></headerStandard>

它可以比这更简单吗？我在俯瞰什么？

Answer 1

您需要更改标记：

<headerStandard></headerStandard>

到

<header-standard></header-standard>

这是因为Angular的HTML编译器将指令的名称从驼峰大小写形式规范化为破折号分隔的形式（标记名称或属​​性），在developer's guide中详细了解它。 / p>

Answer 2

指令的实际名称在directive（）函数

中转换为Camel case表单

带有大写第一个字母的第二个指令词变小，继续用连字符，所以在所有下一个大写的第一个字母将变小并且将在你的自定义指令成为你的自定义指令之前的连字符

这里，headerStandard在视图中成为标题标准

因此，您需要将其用作

<header-standard></header-standard>