angularjs-directive 构建可重用的组件
示例
指令可用于构建可重用组件。这是“用户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>