在 angularJs 中创建指令

Create directive in angularJs

本文关键字：指令 创建 angularJs      更新时间：2023-09-26

>我正在尝试在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;
  });

我的指令文件.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>

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

普伦克链接

您有 2 种命名选项：

1. 

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

阿拉伯数字。

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

更改

<myCustomer></myCustomer>

对此：

<my-customer></my-customer>

指令使用蛇形大小写。

将您的 HTML 更改为此内容

<my-customer></my-customer>

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

相关文章：