javascript - Angular 指令无法使用 Yeoman 工作

Question

我正在尝试测试使用以下命令创建的指令

yo angular:directive countriesDirectives

这是经过一些更改后的指令

'use strict';

/**
 * @ngdoc directive
 * @name miaplicacionApp.directive:countriesDirective
 * @description
 * # countriesDirective
 */
angular.module('miaplicacionApp')
  .directive('countriesDirective', function () {
    return {
      restrict: 'E',
      template: '<h1>hjbjhbjhbjbjhbjhbjhbjhbjhbjhbjhbjhb</h1>',
      link: function postLink(scope, element, attr) {
        element.text('this is the countriesDirective directive');
      }
    };
  });

这里我将该指令包含在我的index.html中

<div class="container cont">
        <h1>jkm</h1>
         <countriesDirective></countriesDirective>
         <br>
         <br>
         <br>
         <br>
        <ng-view></ng-view>
    </div>

然后我运行“gruntserve”。一切都按我的预期工作，但指令不起作用。值得一提的是，当 Yeoman 创建应用程序时，它包含其工作所需的所有必要文件。但由于某种原因我的指令不起作用。

Answer 1

HTML 标记应为 <countries-directive></countries-directive> .

Angular 将camelCase 转换为spine-case。

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).