Javascript AngularJS指令未显示在模板上

我有一个角度指令的小问题，现在正在工作，我不知道为什么。我认为这是一个我忽略的相当简单的问题，也许你能帮我解决

指令的定义如下：

angular.module('directives', [])
    .directive('my-directive', function () {
        return {
            restrict: 'AE',
            scope: {
                name: '=name'
            },
            template: '<h1>{{name}}</h1>'
        };
    });

这里是controllers.js

angular.module('controllers', ['apiServices', 'directives'])
    .controller('homecontroller', function($scope, $resource, webApiService, $log, $translate, $localStorage, $sessionStorage) {

Ok确认Directions.js已加载，否则application.js会唠叨“未知模块”。控制台中没有错误消息，只是没有显示。有什么想法吗

---

编辑

如前所述，我将指令名称更改为camelCase，但仍然不走运：

<my-directive name="John Doe"></my-directive>

但目前还没有任何进展

编辑

问题是angular希望将对象传递到属性中，而不是字符串文本。如果您创建一个对象person={name:'John'}，请传入该person，然后写入{{person.name}（假设我们也将属性person+scope var命名为person）。

在规范化过程中，Angle将

-

分隔的名称转换为camelCase

因此，在JS中指定指令时使用camelCase：

.directive('myDirective', function () {

---

您的指令必须是驼峰式的

    .directive('myDirective', function () {

然后在html中，您可以自由地调用它

myDirective

或

myDirective

两者都是有效的

<my-directive name="test"></my-directive>
<myDirective name="test"></myDirective>

---

我相信您已经解决了这个问题，但是如果您将name的范围定义更改为

scope: {
  name: '@'
}

---

然后，您将能够传递字符串。“@”插入属性，而“=”绑定属性。此外，如果属性名称与范围变量相同，则不需要包含属性名称。

为了进一步了解这一点，我必须使用以下方法使指令正常工作

<my-directive name="test"></my-directive>

---

问题似乎出在指令定义中。你在问题中注意到Angular需要一个对象；这适用于“=”范围，但不适用于“@”范围。在“@”范围内，Angular只需要一个字符串。我在下面创建了一个片段

模块太多

除非在多个应用程序中重用该指令，否则不要为其创建新模块。将指令定义添加到为应用程序创建的模块中。在下面的示例中，我使用“angular.module（moduleName）”调用了该模块。。。仅使用一个参数时，Angular将返回现有对象，而不是创建新对象。这就是我们如何将代码分割成多个文件的方法

需要注意的事项

你会注意到以下几点：

您不需要将模块加载到app变量中。每次调用Singleton实际上更安全、更容易管理内存

正如您已经注意到的，该指令是驼峰式的

我将name属性设置为字符串值，而不是对象；这是因为“@”范围设置才起作用的

div设置为ng app='MyApp'。这通常设置为html元素，但我不想在堆栈交换上弄乱DOM。ng app指令可以在任何元素上设置，与该模块关联的指令将应用于该元素范围内的所有元素。如果没有ng app指令，Angular不知道在页面上运行哪个模块

//app.js-这定义了模块，它使用两个参数告诉喷油器要做什么。
角度模块（'MyApp'，[]）；
//存储在别处的directive.js
//这将回调已创建的模块。它使用一个参数，因为不再需要喷油器。
角度.module（'MyApp'）。指令（'myDirective'，函数（）{
返回{
限制：“AE”，
范围：{
姓名：'@'
},
模板：“{name}}”
};
});

成功加载
通过将指令定义应用于MyApp模块，MyApp模块知道如何在此范围内激活指令。在这种形式下，它不会被注射

非常感谢-所以我改变了主意，但还是不走运。它已经是一个相当大的应用程序了，创建一个提琴也不太容易。控制台中没有错误。我创建并粘贴到应用程序（）中的提琴在fiddler上效果很好。@spike我添加了一个提琴。@spike为了简单起见，您可以只使用一个模块
myApp
，而不是使用多个模块作为控制器、指令、，等等。只是一个想法。如果你想
测试
，那么你可以在指令的链接函数中执行
$attrs.name
。非常感谢-所以我更改了它，但仍然不走运。
<my-directive name="test"></my-directive>
<myDirective name="test"></myDirective>

scope: {
  name: '@'
}

<my-directive name="test"></my-directive>