本帖最后由 大山哥哥 于 2018-11-26 17:40 编辑
本案例基于的技术有bootstrap、angularJS等
我们有一个需求：在多个页面需要展示相同的数据表格，比如分类列表展示，如下图：
我们又不想在多个页面中书写多次table表格，本案例可以利用angularJS自定义directive的方式完成抽取公共代码来处理此需求。
1、页面准备
创建html页面，命名为angularDemo.html需要引入bootstrap样式文件有bootstrap.css、angularJS.js
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJS-自定义组件 directive的使用</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<script src="js/angular.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>分类列表</h3>
<!-- 下面需要展示分页列表数据 -->
</div>
</body>
</html>
2、数据准备
准备分类数据文件category.json，数据内容如下：
[Java] 纯文本查看 复制代码 [{
"id":1,
"name":"北方神",
"intro":"雷神托尔的荣耀"
},{
"id":2,
"name":"西方神",
"intro":"亚硝酸钠的荣耀"
},{
"id":3,
"name":"东方神",
"intro":"河神的哈哈笑"
},{
"id":4,
"name":"南方神",
"intro":"时光鸡的打工仔"
}]
3、自定义模块、directive
创建一个js文件，我给起的文件名是“directiveForTable.js”，为的是和其中的模块名相同，好辨识。
[JavaScript] 纯文本查看 复制代码 angular.module('directiveForTable', []).directive('datatable',[function() {
return {
restrict: 'AE', //限制directive在html中作用的方式。A:attribute; E:element；C:class
template: //template 要替换的内容。该内容即公共使用的数据列表部分
' <table class="table table-hover table-bordered">\n' +
' <tr ng-repeat="currData in dat">\n' +
' <td>{{currData.id}}</td>\n' +
' <td>{{currData.name}}</td>\n' +
' <td>{{currData.intro}}</td>\n' +
' </tr>\n' +
' </table>'
,
replace:true, //将元素完全替代
scope:{ //定义作用域对象
dat : "=listdata" // dat:自定义的作用域对象名；listdata：使用父scope中的listdata对象；=:表示dat和父scope中的listdata双向绑定
}
}
}]);
上述JS代码中，directiveForTable是我们自定义模块名，datatable是我们自定义的angularJS指令，从其中restrict: 'AE'的配置中，可以了解到，该“datatable”可以作为标签来使用，也可以用作属性。
4、页面使用
4.1、在head标签中引入自定义的js文件
注意，一定要写在angular.min.js引用之后
[HTML] 纯文本查看 复制代码 <script src="js/angular.min.js"></script>
<script src="js/directiveForTable.js"></script>
4.2、在body中使用datatable
大家对比一下该body中的<datatable>标签，就是我们自定义的directive：“datatable”
[HTML] 纯文本查看 复制代码 <body ng-app="myApp" ng-controller="myCon">
<!--下面是展示数据列表的div-->
<div class="container-fluid">
<h3>分类列表</h3>
<!-- 下面需要展示分页列表数据 -->
<datatable listdata="categoryData"></datatable>
</div>
</body>
还需要注意的是，在该标签中，属性“listdata”是和directiveForTable.js文件内scope属性“=listdata”的”listdata“相对应的。
4.3、请求数据并填充
[HTML] 纯文本查看 复制代码 <!--该部分内容可以直接写在body标签结束之后-->
<script>
//初始化myapp，并加载自定义模块directiveForTable
var myapp = angular.module('myApp',['directiveForTable']);
myapp.controller("myCon",function ($http,$scope) {
$http({
"url":'js/category.json', //请求json数据
"method":"post",
"responseType":"json"
}).success(function(resp){
$scope.categoryData = resp; //将请求到的json数据填充到域中的属性categoryData中
});
});
</script>
当完成上面代码后，我们来看一下工作目录结构：
代码开发完毕，可以直接从浏览器访问angularDemo.html，查看我们的案例效果：
达到我们预期的效果，那么，我们可以在任何需要该数据列表的位置引用我们自定义的js文件，并按照案例中的HMTL和JS代码引用即可完成想要的效果。
具体项目可以参见附件代码：
angularJS.zip
(282.86 KB, 下载次数: 38)
5、总结
案例的需求是提供一个可重用的公共数据表格，需求比较简单，我们通过自定义模块和directive来完成该功能，与该需求类似的功能还有很多，比如分页，每个数据列表都需要有分页效果，那么，我们也可以抽取一个公共的分页组件来提供给每个需要的页面位置去引用。“分页抽取”详细的使用方式可以参见咱们品优购项目。
本例的目的是讲解directive的使用，大家只需要掌握其中的要点，就可以自行发挥完成想要的效果。
| 
收藏
淘帖
踩
