AngularJS指令无法简单添加H3标签

Question

我正试图将代码从index.html中移出，并在其中插入指令，以提供更好的DRY和SOLID开发过程。我有一个Plunker演示一个简单的测试。在Plunker编辑器的错误之外，我似乎没有得到任何错误，但该指令没有插入简单的H3示例测试。

angular.module('MyApp', []);
angular.module('MyApp').directive('MainMenu', function() {
  return {
    restrict: 'E',
    template: '<h3>Hello World</h3>',
    replace: false,
    transclude: false
  };
});

Answer 1

用于定义指令的大小写与在标记中使用它时使用的大小写不同。

定义它时，使用camelCase。例如CCD_ 2。

在标记中使用它时，可以使用dash-case。例如CCD_ 4。

Answer 2

您调用了错误的指令名称。

请尝试这个：

JS

angular.module('MyApp', []);
angular.module('MyApp').directive('mainMenu', function() {
  return {
    restrict: 'E',
    template: '<h3>Hello World</h3>',
    replace: false,
    transclude: false
  };
});

HTML

<main-menu></main-menu>

链接演示：http://plnkr.co/edit/nRNlvY8ggg47H7OuYuyn?p=preview