Create directive in angularJs

Question

I'm trying to create a directive in angularJS. But it's not working. What I have done is as follow.

my main html code

<body ng-app="birthdayToDo" ng-controller="main">
    <h1>Hello Plunker!</h1>
    <myCustomer></myCustomer>
  </body>

My Js code :

var app = angular.module('birthdayToDo', []);

app.controller('main', function($scope) {
  $scope.employees=[
                    {
                      Name:"Amit",
                      Email:"[email protected]"
                    },
                    {
                      Name:"Ajay",
                      Email:"[email protected]"
                    },
                    {
                      Name:"Rahul",
                      Email:"[email protected]"
                    },
                    {
                      Name:"Aakash",
                      Email:"[email protected]"
                    },
                    {
                      Name:"Rohit",
                      Email:"[email protected]"
                    },
                  ];

});
app.directive('myCustomer', function() {
    var directive = {};

    directive.restrict = 'E'; /* restrict this directive to elements */
    directive.templateUrl = "directiveFile.html";

    return directive;
  });

my directiveFile.html code

<table>
  <tr>
    <td>SNo.</td>
    <td>Name</td>
    <td>Email</td>
  </tr>
  <tr ng-repeat="employee in employees">
    <td>{{$index+1}}</td>
    <td>{{employee.Name}}</td>
    <td>{{employee.Email}}</td>
  </tr>
</table>

But this code is not working . What's wrong I'm doing.

Plunker link

Ben Diamant · Accepted Answer · 2015-01-07 10:58:26Z

2

You have 2 option of naming:

1.

app.directive('myCustomer', function()
<my-customer> </my-customer>

2.

app.directive('mycustomer', function()
<mycustomer>  </mycustomer>

answered Jan 7, 2015 at 10:58

Ben Diamant

6,2164 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stepan Suvorov · Accepted Answer · 2015-01-07 11:00:56Z

2

Change

<myCustomer></myCustomer>

To this:

<my-customer></my-customer>

answered Jan 7, 2015 at 11:00

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

Comments

CodingNinja · Accepted Answer · 2015-01-07 11:03:12Z

2

Directives uses snake case.

change your HTML to this

<my-customer></my-customer>

Always remember ng-app, ng-click, etc

answered Jan 7, 2015 at 11:03

CodingNinja

8019 silver badges17 bronze badges

Collectives™ on Stack Overflow

Create directive in angularJs

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related