Why my directives don't work in Plunker?

Question

I was going to use Plunker to assist me in testing a directive, but first I just wanted to create one to test plunker was working, so I put in some sample code. Guess what, basic directives are not working and I have no idea why.

My directives:

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

My 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

Alhuck · Accepted Answer · 2015-06-11T11:37:26.207

3

while calling a directive in html you should replacecamelcase in directives name like this,

<element-directive></element-directive> and not as it is,

<elementDirective></elementDirective>

like you did.

Hope this helps!!!

PLUNKER

see through the custom directives here

edited Jun 11 '15 at 11:37

answered Jun 11 '15 at 11:31

Alhuck

1,029
8
11

Please look at this [question](https://stackoverflow.com/questions/31001134/how-to-create-network-graph-or-hierarchical-tree-using-visjs-in-angularjs) in here my [plunker](http://plnkr.co/edit/SKfNdsw9g9aCG6wZsQNZ?p=preview) is not working. Please help. – Jun 23 '15 at 12:06

score 2 · Answer 2 · answered Jun 11 '15 at 11:34

2

You should use

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

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

answered Jun 11 '15 at 11:34

Navaneet

1,367
1
19
44

score 2 · Answer 3 · answered Jun 11 '15 at 11:34

2

Common problem - you can't use camel case in your HTML element declaration.

Try <element-directive></element-directive>

answered Jun 11 '15 at 11:34

Jake Wright

199
2

score 0 · Answer 4 · answered Jun 11 '15 at 11:31

Use restrict: 'A' in your directive to refer to attribute. Use restrict: 'E' in your directive to refer to element.

Find the plunkr: "http://plnkr.co/edit/b1cf6l?p=preview"

Also call your directive using:

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

Why my directives don't work in Plunker?

4 Answers4