在 angularJs 中创建指令

Question

我正在尝试在 angularJS 中创建一个指令。但它不起作用。我所做的如下。

我的主要html代码

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

我的JS代码：

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

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

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

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

    return directive;
  });

我的directiveFile.html代码

<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>

但是这段代码不起作用。我怎么了。

Plunker link

Answer 1

您有 2 个命名选项：

1.

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

2.

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

Answer 2

改变

<myCustomer></myCustomer>

为此：

<my-customer></my-customer>

Answer 3

指令使用蛇形大小写。

把你的HTML改成这个

<my-customer></my-customer>

永远记住 ng-app、ng-click 等

在 angularJs 中创建指令

Create directive in angularJs

html

javascript

angularjs