angularJs的繼承

為什么要繼承，本來是后端的概念，但是同樣適用於前端開發。繼承，無疑是將通用的東西抽取出來。

下面介紹的是angular的偽繼承，就是說是通過繼承scope這個變量來實現的。代碼很簡單，一行代碼就可以。

注意：需要引入 $controller 這個服務。

代碼如下：

baseController.js

 //品牌控制層 
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);//刪除 
        }
    }
    
    
    $scope.jsonToString=function(jsonString,key){
        
        var json= JSON.parse(jsonString);
        var value="";
        
        for(var i=0;i<json.length;i++){
            if(i>0){
                value+=",";
            }            
            value +=json[i][key];            
        }
                
        return value;
    }
    
});    

brandController.js

 //控制層 
app.controller('brandController' ,function($scope,$controller   ,brandService){    
    
    $controller('baseController',{$scope:$scope});//繼承
    
    //讀取列表數據綁定到表單中  
    $scope.findAll=function(){
        brandService.findAll().success(
            function(response){
                $scope.list=response;
            }            
        );
    }    
    
    //分頁
    $scope.findPage=function(page,rows){            
        brandService.findPage(page,rows).success(
            function(response){
                $scope.list=response.rows;    
                $scope.paginationConf.totalItems=response.total;//更新總記錄數
            }            
        );
    }
    
    //查詢實體 
    $scope.findOne=function(id){                
        brandService.findOne(id).success(
            function(response){
                $scope.entity= response;                    
            }
        );                
    }
    
    //保存 
    $scope.save=function(){                
        var serviceObject;//服務層對象                  
        if($scope.entity.id!=null){//如果有ID
            serviceObject=brandService.update( $scope.entity ); //修改  
        }else{
            serviceObject=brandService.add( $scope.entity  );//增加 
        }                
        serviceObject.success(
            function(response){
                if(response.success){
                    //重新查詢 
                    $scope.reloadList();//重新加載
                }else{
                    alert(response.message);
                }
            }        
        );                
    }
    
     
    //批量刪除 
    $scope.dele=function(){            
        //獲取選中的復選框            
        brandService.dele( $scope.selectIds ).success(
            function(response){
                if(response.success){
                    $scope.reloadList();//刷新列表
                    $scope.selectIds=[];
                }                        
            }        
        );                
    }
    
    $scope.searchEntity={};//定義搜索對象 
    
    //搜索
    $scope.search=function(page,rows){            
        brandService.search(page,rows,$scope.searchEntity).success(
            function(response){
                $scope.list=response.rows;    
                $scope.paginationConf.totalItems=response.total;//更新總記錄數
            }            
        );
    }
    
});