Question

我打算使用Plunker来帮助我测试一个指令，但首先我只想创建一个测试plunker工作，所以我输入了一些示例代码。猜猜什么，基本指令不起作用，我不明白为什么。

我的指示：

> library(git2r)
> repo <- repository("./")
>
> default_signature(repo)
name:  xyz
email: xyz@gmail.com
when:  2015-06-11 16:48:07
> d <- default_signature(repo)@when
> d
2015-06-11 16:51:54
> class(d)
[1] "git_time"
attr(,"package")
[1] "git2r"
>
> attributes(d)
> attributes(d)
$time
[1] 1434021714

$offset
[1] 330

$class
[1] "git_time"
attr(,"package")
[1] "git2r"

我的HTML：

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');
      });
    }
  };
});

http://plnkr.co/edit/H9vPhV

Answer 1

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

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

<elementDirective></elementDirective>

和你一样。

希望这有帮助!!!

PLUNKER

see through the custom directives here

Answer 2

你应该使用

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

请参阅http://plnkr.co/edit/2aGGDRw6SdYNc1joSVI1?p=preview

Answer 3

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

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

Answer 4

在指令中使用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>

为什么我的指令不适合在Plunker工作？

4 个答案: