黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理 二 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-13 09:56
标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理 二

【郑州校区】品优购电商系统开发第 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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2