AngularJS自定义指令教程
时间：2020-02-23 14:29:33 来源:igfitidea点击:
AngularJS提供了一些指令来操纵DOM的行为。
之前我们看过一些内置指令，例如ng-app，ng-controller，ng-repeat等。
您可以查看官方的angular API文档以获取更多指令。
尽管angular提供了许多内置指令，但有时我们会遇到一些场景，在这些场景中我们需要编写自己的指令来实现特定任务。
在这一系列教程中，我们将指导您编写一个好的Angular指令。
创建指令
我们使用module.directiveAPI来注册我们的指令。
您必须确保不要在指令前加上ng前缀，因为它可能与其他内置指令冲突。
在本文中，我们将创建一个模板扩展指令。
有时，我们必须在应用程序中的多个位置使用同一模板。
我们可以使用自定义指令来简化这些通用指令的使用。
这使代码更易于管理。
以下示例演示了如何使用模块的指令API创建指令。
在此示例中，我们使用指令的模板属性创建名为myEmployee的指令。
app.js
var app = angular.module('mainApp', []);
app.controller('EmployeeCtrl', function($scope) {
$scope.employee = {
role: 'Software Developer',skill:'Angular JS'
};
});
app.directive('myEmployee', function() {
return {
template: 'Role: {{employee.role}} - Skill: {{employee.skill}}'
};
});
以下代码演示了如何使用我们的" myEmployee"指令。
index.html
<html> <head> <title>AngularJS Custom Directive Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-app="mainApp" ng-controller="EmployeeCtrl"> <div my-employee></div> </div> </body> </html>
您将在浏览器中看到以下输出。
模板属性定义了应该是指令输出的内容。
我们可以包括HTML，数据绑定表达式，甚至其他指令。
除非模板太小，否则最好将其分解成自己HTML文件，并使用templateUrl选项加载。
我们将修改上面的示例，以演示指令的templateUrloption属性的用法。
app.js
var app = angular.module('mainApp', []);
app.controller('EmployeeCtrl', function($scope) {
$scope.employee = {
role: 'Software Developer',skill:'Angular JS'
};
});
app.directive('myEmployee', function() {
return {
templateUrl: 'my-employee.html'
};
});
index.html文件没有任何变化。
index.html
<html> <head> <title>AngularJS Custom Directive Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-app="mainApp" ng-controller="EmployeeCtrl"> <div my-employee></div> </div> </body> </html>
my-employee.html文件包含该指令使用的模板的内容。
my-employee.html
Role: {{employee.role}} - Skill: {{employee.skill}}
