指令可用于构建可重用组件。这是“用户Box”组件的示例：
userBox.js
angular.module('simpleDirective', []).directive('userBox', function() {
return {
scope: {
username: '=username',
reputation: '=reputation'
},
templateUrl: '/path/to/app/directives/user-box.html'
};
});Controller.js
var myApp = angular.module('myApp', ['simpleDirective']);
myApp.controller('Controller', function($scope) {
$scope.user = "John Doe";
$scope.rep = 1250;
});myPage.js
<html lang="en" ng-app="myApp"> <head> <script xx_src="/path/to/app/angular.min.js"></script> <script xx_src="/path/to/app/controllers/Controller.js"></script> <script xx_src="/path/to/app/directives/userBox.js"></script> </head> <body> <div ng-controller="Controller"> <user-box username="user" reputation="rep"></user-box> </div> </body> </html>
user-box.html
<div>{{username}}</div>
<div>{{reputation}} reputation</div>