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中创建指令

3 个答案: