AnglarJS(六)继承

最新推荐文章于 2020-09-15 08:31:18 发布

houysx

最新推荐文章于 2020-09-15 08:31:18 发布

阅读量232

点赞数

分类专栏： 6AnglarJS 文章标签： controller AngularJS 继承

本文链接：https://blog.csdn.net/houysx/article/details/80376166

版权

6AnglarJS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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;
                })

    };


})