AnglarJS(六)继承

  有些功能是每个页面都有可能用到的,比如分页,复选,字符串转换等等,如果我们再开发另一个功能,还需要重复编写。怎么能让这些通用的功能只写一次呢?我们通过继承的方式来实现。
  定义一个基本的控制器,作为父控制器,提供通用的控制器方法,例如分页,字符串转换……

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

    //父控制器的方法,子控制器通过继承直接获得,避免代码冗余
    // 分页控件配置
    $scope.paginationConf = {
        currentPage : 1,
        totalItems : 10,
        itemsPerPage : 10,
        perPageOptions : [ 10, 20, 30, 40, 50 ],
        onChange : function() {
            $scope.reloadList();// 重新加载
        }
    };

    $scope.searchEntity = {};

    // 分页刷新页面的方法
    $scope.reloadList = function() {
        $scope.findPage($scope.paginationConf.currentPage,
                $scope.paginationConf.itemsPerPage)

    };


    // 字符串转换为json,并提取关键字
    $scope.strToJson = function(str, key) {
        var jsonObj = JSON.parse(str);
        var value = "";

        for (var i = 0; i < jsonObj.length; i++) {
            if (i > 0) {
                value += ",";
            }
            value += jsonObj[i][key];

        }
        ;
        return value;
    };

})

定义不同页面的控制器,继承基本控制器

/**   
     1.定义品牌页面控制器,继承父控制器,将$controller引入子控制器
        $controller 也是 angular 提供的一个服务,可以实现伪继承,
        实际上就是与 BaseController 共享$scope
        这样就实现了通用代码的抽取
        */
app.controller('brandController', function($scope,$controller) {

    // 继承控制器
    // 2.共享$scope域,做到继承
    $controller("baseController", {
        $scope : $scope
    });

    // 分页条件查询,这里父自动刷新时,可以调用子控制器的方法
    $scope.findPage = function(page, rows) {

        brandService.findPage(page, rows, $scope.searchEntity).success(
                function(data) {
                    $scope.entitys = data.rows;
                    $scope.paginationConf.totalItems = data.total;
                })

    };


})

你可能感兴趣的:(6AnglarJS,controller,AngularJS,继承)