Question

在a previous question中，我遇到了使复杂小部件正常工作的问题。

醒来之后头脑清醒，我决定先从理智检查开始：我能否获得正确工作的基本指令？鉴于我过去曾写过指令，我预见到没有困难。

This is the basic plunker I wrote, with only two very basic use cases.

app.directive('TestDirective',
  function () {
    return {
      template: '<strong>This is a test directive.</strong>'
    };
  }
);

app.directive('SecondTestDirective', 
  function () {
    templateUrl: 'directiveTest.html'
  }
);

显然，这不是一个理智的案例。我正在使用Angular 1.2.20，但显然，既没有使用硬编码模板的基本指令，也没有带有对硬编码模板的URL引用的基本指令，它们都能正常工作。由于这是一个非常基本的案例，我的问题：我做错了什么？我应该在Angular的GitHub项目中打开一个错误吗？

Answer 1

你的问题很简单：指令名的第一个字母必须是小写的。例如，代替SecondTestDirective使用secondTestDirective

在匹配指令时，Angular从元素/属性名称中删除前缀x-或data-。然后它将 - 或：分隔的字符串转换为camelCase并与注册的指令匹配。这就是我们在HTML中使用secondTestDirective指令作为second-test-directive的原因。

Answer 2

你的代码有几个问题，这是它的固定版本：

app.directive('testDirective',
  function () {
    return {
      restrict: 'AE',
      template: '<strong>This is a test directive.</strong>'
    };
  }
);

app.directive('secondTestDirective', 
  function () {
    return{
      restrict: 'AE',
      templateUrl: 'directiveTest.html'
    }
  }
);

Example

错误的事情：

指令的名称应采用驼峰式格式（第一个字符应为小写）
第二个指令未返回对象
如果您要将指令用作元素，则应在restrict属性中指定。

指令在Angular 1.2.20中不起作用

2 个答案:

Example