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。例如angular.module('MyApp').directive('mainMenu', ....

在标记中使用它时，您使用 dash-case。例如<main-menu></main-menu>.

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>

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

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

AngularJS Directive not working to simply add a H3 tag

angularjs

angularjs-directive