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>

然后我跑''咕噜叫''。一切都按照我的预期运作，但指令不起作用。值得一提的是，当Yeoman创建应用程序时，它包含了所有必要的文件。但出于某种原因，我的指示无效。

Answer 1

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

Angular将camelCase转换为脊柱病例。

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

Answer 2

对于那些不使用angularjs的人来说，这是一个常见的错误。所以，创建yo angular:directive payment-form时发生的事情是：

运行命令后输出：angular.module('myApp').directive('paymentForm', function () { ... more content...});
我以这种方式使用的page.html页面内容： <paymentForm></paymentForm>哪个错了。正确的方法是：<payment-form></payment-form>

Angular指令无法使用Yeoman

2 个答案: