为什么我的指令在 Plunker 中不起作用？

Question

我打算使用 Plunker 来帮助我测试一个指令，但首先我只想创建一个来测试 plunker 是否正常工作，所以我放入了一些示例代码。你猜怎么着，基本指令不起作用，我不知道为什么。

我的指令：

app.directive('attributeDirective', function() {
  return {
    restrict: 'A',
    link: function(scope, iElement, iAttrs) {

      iElement.bind('click', function() {
        console.log('clicked attributeDirective');
      });
      iElement.bind('mouseover', function() {
        iElement.css('cursor', 'pointer');
      });
    }
  };
});

app.directive('elementDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<h2>this is elementDirective</h2>',
    link: function(scope, iElement, iAttrs) {

      iElement.bind('click', function() {
        console.log('clicked elementDirective');
      });
      iElement.bind('mouseover', function() {
        iElement.css('cursor', 'pointer');
      });
    }
  };
});

我的html:

<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>

<h2 attributeDirective>Here is my attribute directive</h2>

<elementDirective></elementDirective>

</body>

http://plnkr.co/edit/H9vPhV

Answer 1

在 html 中调用指令时，您应该将 camelcase 替换为这样的指令名称，

<element-directive></element-directive> 而不是原样，

<elementDirective></elementDirective>

就像你一样。

希望对您有所帮助！！！

PLUNKER

see through the custom directives here

Answer 2

在指令中使用 restrict: 'A' 来引用属性。在指令中使用 restrict: 'E' 来引用元素。

找到 plunkr：“http://plnkr.co/edit/b1cf6l?p=preview”

也可以使用以下方式调用您的指令：

<h2 attribute-directive>Here is my attribute directive</h2>   
<element-directive></element-directive>

Answer 3

你应该使用

<h2 attribute-directive>Here is my attribute directive</h2>

见http://plnkr.co/edit/2aGGDRw6SdYNc1joSVI1?p=preview

Answer 4

常见问题 - 您不能在 HTML 元素声明中使用驼峰式大小写。

尝试<element-directive></element-directive>

为什么我的指令在 Plunker 中不起作用？

Why my directives don't work in Plunker?

angularjs

angularjs-directive

plunker