为什么要继承,本来是后端的概念,但是同样适用于前端开发。继承,无疑是将通用的东西抽取出来。

下面介绍的是angular的伪继承,就是说是通过继承scope这个变量来实现的。代码很简单,一行代码就可以。

注意:需要引入 $controller 这个服务。

代码如下:

baseController.js

  1. //品牌控制层
  2. app.controller('baseController' ,function($scope){
  3.  
  4. //重新加载列表 数据
  5. $scope.reloadList=function(){
  6. //切换页码
  7. $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
  8. }
  9.  
  10. //分页控件配置
  11. $scope.paginationConf = {
  12. currentPage: 1,
  13. totalItems: 10,
  14. itemsPerPage: 10,
  15. perPageOptions: [10, 20, 30, 40, 50],
  16. onChange: function(){
  17. $scope.reloadList();//重新加载
  18. }
  19. };
  20.  
  21. $scope.selectIds=[];//选中的ID集合
  22.  
  23. //更新复选
  24. $scope.updateSelection = function($event, id) {
  25. if($event.target.checked){//如果是被选中,则增加到数组
  26. $scope.selectIds.push( id);
  27. }else{
  28. var idx = $scope.selectIds.indexOf(id);
  29. $scope.selectIds.splice(idx, 1);//删除
  30. }
  31. }
  32.  
  33. $scope.jsonToString=function(jsonString,key){
  34.  
  35. var json= JSON.parse(jsonString);
  36. var value="";
  37.  
  38. for(var i=0;i<json.length;i++){
  39. if(i>0){
  40. value+=",";
  41. }
  42. value +=json[i][key];
  43. }
  44.  
  45. return value;
  46. }
  47.  
  48. });

brandController.js

  1. //控制层
  2. app.controller('brandController' ,function($scope,$controller ,brandService){
  3.  
  4. $controller('baseController',{$scope:$scope});//继承
  5.  
  6. //读取列表数据绑定到表单中
  7. $scope.findAll=function(){
  8. brandService.findAll().success(
  9. function(response){
  10. $scope.list=response;
  11. }
  12. );
  13. }
  14.  
  15. //分页
  16. $scope.findPage=function(page,rows){
  17. brandService.findPage(page,rows).success(
  18. function(response){
  19. $scope.list=response.rows;
  20. $scope.paginationConf.totalItems=response.total;//更新总记录数
  21. }
  22. );
  23. }
  24.  
  25. //查询实体
  26. $scope.findOne=function(id){
  27. brandService.findOne(id).success(
  28. function(response){
  29. $scope.entity= response;
  30. }
  31. );
  32. }
  33.  
  34. //保存
  35. $scope.save=function(){
  36. var serviceObject;//服务层对象
  37. if($scope.entity.id!=null){//如果有ID
  38. serviceObject=brandService.update( $scope.entity ); //修改
  39. }else{
  40. serviceObject=brandService.add( $scope.entity );//增加
  41. }
  42. serviceObject.success(
  43. function(response){
  44. if(response.success){
  45. //重新查询
  46. $scope.reloadList();//重新加载
  47. }else{
  48. alert(response.message);
  49. }
  50. }
  51. );
  52. }
  53.  
  54. //批量删除
  55. $scope.dele=function(){
  56. //获取选中的复选框
  57. brandService.dele( $scope.selectIds ).success(
  58. function(response){
  59. if(response.success){
  60. $scope.reloadList();//刷新列表
  61. $scope.selectIds=[];
  62. }
  63. }
  64. );
  65. }
  66.  
  67. $scope.searchEntity={};//定义搜索对象
  68.  
  69. //搜索
  70. $scope.search=function(page,rows){
  71. brandService.search(page,rows,$scope.searchEntity).success(
  72. function(response){
  73. $scope.list=response.rows;
  74. $scope.paginationConf.totalItems=response.total;//更新总记录数
  75. }
  76. );
  77. }
  78.  
  79. });

angularJs的继承的更多相关文章

  1. angularjs controller 继承

    前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...

  2. 夺命雷公狗—angularjs—4—继承和修正继承

    angularjs 中也有继承的方法,废话不多说,看代码: <!doctype html> <html lang="en"> <head> &l ...

  3. AngularJs之Scope作用域

    前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...

  4. 《AngularJS入门与进阶》图书简介

    一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...

  5. AngularJS 作用域与数据绑定机制

    AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...

  6. 夺命雷公狗—angularjs—24—extend继承对象

    我们的angularjs中也是给我们留下了方法来做继承的,那么他就是传授中的extend... 不过要如下所示,第二个参数是继承到第一个对象里面的... <!DOCTYPE html> & ...

  7. AngularJS中控制器继承

    本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的. 嵌套控制器中属性是如何被继承的? ==属性值是字符串 myApp.controller("ParentCtrl&qu ...

  8. angularjs 中的scope继承关系——(2)

    转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...

  9. angularjs 中的scope继承关系——(1)

    转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html JavaScript 的原型链继承 假设父类 parentScop ...

随机推荐

  1. [BZOJ2138]stone[霍尔定理+线段树]

    题意 一共有 \(n\) 堆石子,每堆石子有一个数量 \(a\) ,你要进行 \(m\) 次操作,每次操作你可以在满足前 \(i-1\) 次操作的回答的基础上选择在 \([L_i,R_i]\) 区间中 ...

  2. LeetCode Container With Most Water (Two Pointers)

    题意 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...

  3. FME Cloud 账号申请流程

    第一步,访问SAFE的FME Cloud注册页,官网明确表态,如果你是一个新的FME Cloud用户,你可以免费获得一个初级版.地址:https://console.fmecloud.safe.com ...

  4. 阿里(蚂蚁,菜鸟)+百度+网易面经(JAVA)

    本人综述: 本人本科和硕士均是毕业于普通的双非院校,参加过ACM竞赛,阿里面了三次全被拒了,网易收到offer. 阿里面试: 阿里的面试问的都是很基础的东西,如操作系统的简单问题,计算机网络的基本问题 ...

  5. BigDecimal的setScale()方法无效(坑)

    最近在使用BigDecimal进行四舍五入时,发现setScale()方法设置的精度值并没有起作用,一度让我怀疑起是否jdk有bug,代码如下: 错误代码 double d = 7.199999999 ...

  6. PAT甲题题解-1081. Rational Sum (20)-模拟分数计算

    模拟计算一些分数的和,结果以带分数的形式输出注意一些细节即可 #include <iostream> #include <cstdio> #include <algori ...

  7. linux第一次实验报告

    http://wwwcnblogs.com/20135228guoyao/4964477.html

  8. 四则运算level2

    package j; import java.util.Scanner; public class Main { public static void main(String[] args) { Sc ...

  9. YOLO(You Only Look Once)

    参考 YOLO(You Only Look Once)算法详解 YOLO算法的原理与实现 一.介绍 YOLO算法把物体检测问题处理成回归问题,用一个卷积神经网络结构就可以从输入图像直接预测boundi ...

  10. (改进)Python语言实现词频统计

    需求: 1.设计一个词频统计的程序. 2.英语文章中包含的英语标点符号不计入统计. 3.将统计结果按照单词的出现频率由大到小进行排序. 设计: 1.基本功能和用法会在程序中进行提示. 2.原理是利用分 ...