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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

控制器继承
2.1 需求分析
有些功能是每个页面都有可能用到的,比如分页,复选等等,如果我们再开发另一个功能, 还需要重复编写。怎么能让这些通用的功能只写一次呢?我们通过继承的方式来实现。
2.2 前端代码
2.2.1 建立父控制器
在 pinyougou-manager-web 的 js/controller 目录下建立 baseController.js
[AppleScript] 纯文本查看 复制代码
//基本控制层

app.controller('baseController'  ,function($scope){

//重新加载列表 数据

$scope.reloadList=function(){
[AppleScript] 纯文本查看 复制代码
//切换页码

$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);//删除

}


}
[AppleScript] 纯文本查看 复制代码
});
2.1.1 修改品牌控制器层
修改 brandController.js
[AppleScript] 纯文本查看 复制代码
//品牌控制层

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

0 个回复

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