AngularJS 构建可重用的组件
示例
指令可用于构建可重用组件。这是“用户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;
$scope.user2 = "Andrew";
$scope.rep2 = 2850;
});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/js/controllers/Controller.js"></script>
<script xx_src="/path/to/app/js/directives/userBox.js"></script>
</head>
<body>
<div ng-controller="Controller">
<user-box username="user" reputation="rep"></user-box>
<user-box username="user2" reputation="rep2"></user-box>
</div>
</body>
</html>user-box.html
<div>{{username}}</div>
<div>{{reputation}} reputation</div>结果将是：
John Doe 1250 reputation Andrew 2850 reputation