Question

我是AngularJS的新手，看到我的所有html代码变得越来越庞大和肮脏，我想做指令来组织它。所以，我从一个小指令开始，你可以在这里看到：

app.module('MyDirectiveModule', [ ])

.directive('TestDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'test-index.html'
  };
});

这段代码：

  <div class="text-center">
      <h1>Coding with AngularJs</h1><br><br>
  </div>

所以最终的结果是（html指令文件是test-index.html）：

<body ng-app="testsApp">

  <test-index></test-index>

我包含了所有脚本，并且我已经检查了所有路径，但我仍然不明白为什么它仍然不起作用..

Answer 1

您使用<test-index></test-index>调用您的指令，但您的指令名称为TestDirective。您应该使用<test-directive></test-directive>

来调用它

另外，如果您正在使用Angular 1.5，我建议您查看组件而不是指令。它将使Angular2的过渡更顺畅。

Answer 2

你有这个：

<body ng-app="testsApp">

这意味着你应该拥有一个testsApp模块。如果这样做，它应该取决于你的指令所在的MyDirectiveModule。

angular.module('testsApp', ['MyDirectiveModule']);

如果您没有testsApp模块，请将ng-app值替换为指令模块：

<body ng-app="MyDirectiveModule">

正如@Baruch所提到的，你的指令元素应该改为：

<test-directive></test-directive>

AngularJS自定义指令不生成代码

2 个答案: