A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

【郑州校区】品优购电商系统开发第 3 章规格及模板管理 二

2.控制器继承
2.1 需求分析
有些功能是每个页面都有可能用到的,比如分页,复选等等,如果我们再开发另一个功能,还需要重复编写。怎么能让这些通用的功能只写一次呢?我们通过继承的方式来实现。
2.2 前端代码
2.2.1 建立父控制器
pinyougou-manager-web js/controller 目录下建立 baseController.js
[AppleScript] 纯文本查看 复制代码
//基本控制层
app.controller('baseController' ,function($scope){
//重新加载列表 数据
$scope.reloadList=function(){
//切换页码
$scope.search( $scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
$scope.reloadList();//重新加载
}
};
$scope.selectIds=[];//选中的 ID 集合
//更新复选
$scope.updateSelection = function($event, id) {
if($event.target.checked){//如果是被选中,则增加到数组
$scope.selectIds.push( id);
}else{
var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx, 1);//删除
}
}
}); 

2.2.2 修改品牌控制器层
[AppleScript] 纯文本查看 复制代码
修改 brandController.js
 //品牌控制层
app.controller('brandController' ,function($scope,$controller,brandService){
$controller('baseController',{$scope:$scope});//继承
//读取列表数据绑定到表单中
$scope.findAll=function(){
brandService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//其它方法省略........
}); 


$controller 也是 angular 提供的一个服务,可以实现伪继承,实际上就是与 BaseController $scope


1 个回复

正序浏览
您需要登录后才可以回帖 登录 | 加入黑马