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>

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

AngularJS指令不能简单地添加H3标签

2 个答案: