1.指令-控制器.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>angularjs指令</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="jquery-2.1.3.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
</head>
<!-- directive调用参数时，需要在scope里面指定，比如template要调用controller里面的name，
则需要先在渲染的span里面定义一个qw-color标签，directive的scope里面定义color取qw-color的name
调用函数时用的是'&'，调用参数是用的是'='-->
<body ng-app="kongwc">
<qing-wei></qing-wei>
<!-- 多个table可以在此添加多条-->
<qing-wei></qing-wei>
</body>
<script>
var app = angular.module('kongwc',[]);
app.directive('qingWei',function () {
return {
restrict : 'E',replace : true,templateUrl : 'table.html',controller : (function ($scope) {
$scope.datas = [
{ id: "1",name : "小白牛",phone : "13465352119" },{ id: "2",name : "迷迭香",phone : "1565354662" },{ id: "3",name : "龙之谷",phone : "13765354891" }
];
})
}
});
</script>
</html>
2.table.html
<table class="table table-striped">
<tr>
<th>序号</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr ng-repeat="data in datas">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.phone}}</td>
</tr>
</table>
原文链接：https://www.f2er.com/angularjs/146977.html