使用angularjs1.x构建前台开发框架（九）——弹窗【三】

最新推荐文章于 2021-09-28 10:35:55 发布

讨厌走开啦

最新推荐文章于 2021-09-28 10:35:55 发布

阅读量1.4k

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/lqlqlq007/article/details/54233914

版权

angularjs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

前面两个章节分别介绍了如何在web工程中引入第三方弹出框组件以及组件API中的几个常用功能，接下来本章介绍一下如何对弹出框组件进行二次封装。

先来聊一下二次封装的意义：

通常一个web工程中会多次使用同一个第三方组件（以弹出框组件为例，在实际开发中一般不会只有一处需要使用弹出框），而为了保持web工程中界面风格一致，则会要求使用第三方组件时的视觉效果和交互动作保持统一（弹出框的大小、背景、取消关闭按钮等等都是可以通过API来进行配置，但在同一个项目中，不同页面定义的弹出框往往会要求视觉效果和交互动作保持一致），而要做到这一点最好的方法就是对需要使用的第三方组件进行二次封装（当然也可以强行要求每处使用的弹出框保持一致，不过一旦弹出框的基本属性需要调整，那么统一一把所需的代价是不可想象的）。

先看一下新增的对第三方弹出框组件进行二次封装的服务位置（笔者的自定义服务或二次封装的服务都放在framework的service目录下，意为框架提供的服务能力）：

下面看一下在新增的modalService.js中是如何对第三方弹出框组件进行二次封装的：

/**
 * Created by 李庆 on 2017/1/8.
 */

define(["jquery"], function($){
    var service = ["$modal",function($modal){
        this.show = function(item){
            var modalCtrl = function($scope,$modalInstance,item){
                $scope.item = item;
                $scope.close = function(){
                    $modalInstance.close();
                }
            };

            var modal = $modal.open({
                templateUrl:"framework/views/modal.html",
                controller:modalCtrl,
                resolve:{
                    "item":function(){
                        return item;
                    }
                }
            });
            return modal;
        }
    }];
    return service;
});

这部分代码和上一章的弹出框代码基本一致，唯一的区别就是把整个弹出框的定义和创建放在了我们新增service的show方法里，供外部调用。

要注意一点，我们希望传递给弹出框的信息（在弹出框代码里是resolve里的参数item），可以通过show方法的参数item传入。

接下来是在框架module对应的framework.js中注册这个新增的service：

/**
 * Created by 李庆 on 2016/10/6.
 */
define(["angular","angular-ui-router","../framework/config/frameworkConfig",
        "../framework/controller/frameworkCtrl","../framework/service/maskService",
        "ui-bootstrap-tpls-0.11.0.min","../framework/service/modalService"],
    function(angular,router,frameworkConfig,frameworkCtrl,maskService,uiBootstarp,modalService){
        var dependency = [
            "ng",
            "ui.router",
            frameworkConfig.name,
            "ui.bootstrap"
        ];
        var framework = angular.module("framework",dependency);
        framework.controller("frameworkCtrl",frameworkCtrl);
        framework.service("maskService",maskService);
        framework.service("modalService",modalService);
        return framework;
    }
);

变更内容如下：

然后是在业务模块frameworkCtrl.js中对新增弹出框service的使用：

/**
 * Created by 李庆 on 2016/10/6.
 */
define(["language"],function(i18n){
    //var frameworkControl=["$rootScope","$scope","$modal",function($rootScope,$scope,$modal){
    var frameworkControl=["$rootScope","$scope","modalService",function($rootScope,$scope,modalService){
        $rootScope.menus={
            "url":"framework/views/menu.html"
        };
        $scope.i18n = i18n;
        $scope.item = "it is a message";

        $scope.change = function(language){
            var expires = new Date(9999,12,31).toUTCString();
            document.cookie = "lan="+language+"; "+expires;

            location.reload();
        };

        //var modalController = function($scope, $modalInstance, item){
        //    $scope.item = item;
        //};
        //
        //$scope.modal = function(){
        //    $modal.open({
        //        templateUrl:"framework/views/modal.html",
        //        backdrop:"static",
        //        controller:modalController,
        //        resolve:{
        //            "item":function(){
        //                return $scope.item;
        //            }
        //        }
        //    });
        //}

        $scope.modal = function() {
            modalService.show("new modal").result.then(function (result) {
                console.log("enter close");
            });
        }
    }];
    return frameworkControl;
})

变更内容如下：