ionic入门教程第十二课-通用模块的分离$ionicModal

本来好几个朋友跟我说，让我帮忙写防已上线APP的Demo，我正在考虑，可能后续才会开始。

我觉得我还是应该先把这些比较基础的东西讲清楚了。

十几年前的软件危机，现在依旧存在。

13年的问题16年了还是有。

只要有人使用ionic，那么不管什么时候，新手总会遇到类似的问题。

因为我自己在学习的时候，百度上找的很多资料都是好几年前的，但是却可以解决我的问题。

所以我也希望，我写的教程能够帮助网友解决一点小问题。

讲完了上次的Demo，突然间不知道该讲些什么了。

刚好今天一个朋友问了我一个问题，我就拿出来说一说了。

他的需求是，要在A控制器调用B控制器的一个方法。

我分析了他的问题，我觉得他应该是想写通用模块。

后面我跟他讨论，可以写到$rootScope里面，但又考虑到全局变量常驻内存，而且将方法写在run里面也不是非常好。

（我们公司的项目就是大量使用了$rootScope导致现在启动时业务太多了）

后来我建议他写成服务。

这里我用最常用的通用模块来说明吧！

在项目中我们经常使用到的通用模块就是确认框了，给出一行提示，有一个确认按钮，点击了关闭弹出窗口。

首先定义一个服务

.factory('ModalService',function(){});

然后在服务里面定义一个初始化的函数。

var initModal = function($scope){//这里初始化的时候，把当前调用的控制器的对象传递进来，方便后面直接调用 函数

var modal =$ionicModal.fromTemplateUrl();//使用ionicModal的方法定义一个Modal。

最后把这个modal，return出去。就是调用一次这个init就自动完成了一个Modal的创建。里面的功能也是独立的。

使用的时候更简单，只要在控制器里面ModalService.initModal($scope);

这样子这个控制器就自动绑上了openModal、closeModal等几个方法了。

.factory('ModalService', function ($ionicModal) {
        var initModal = function ($scope) {
            var modal = $ionicModal.fromTemplateUrl('templates/modal.html',{
                scope:$scope,
                animation:'slide-in-up'
            }).then(function (modal) {
                $scope.modal = modal;
                return modal
            });
            $scope.openModal = function () {
                $scope.modal.show();
            };
            $scope.closeModal = function () {
                $scope.modal.hide();
            };
            $scope.$on('$destroy', function () {
                $scope.modal.remove();
            });
            return modal;
        };
        return {
            initModal : initModal
        }
    })

有些朋友不是很明白这个过程。

我觉得可以把这个理解成是JavaScript的一个特性，可以在任意的地方给对象附加属性和方法。

举个简化的例子来说明

        var Math = {};
        function mathFunc (math){
            math.add = function (a,b) {
                return a+b;
            };
            math.sub = function (a,b) {
                return a-b;
            }
            return math.sub;
        }
        //这里需要注意的是mathFunc返回的是减法的函数
        var sub = mathFunc(Math);
        //我们这里先使用的是我们最开始定义的Math
        var sum = Math.add(1,2);
        //打印出来：3
        console.log(sum);
        //这个很好理解的，打印出来：1
        var AsubB = sub(2,1);
        console.log(AsubB);

值得注意的是在mathFunc函数里面，就算定义了一个新变量 var math1 = math，然后math1.add = func(){};还是会修改调用时传进来的对象的。

这里需要涉及更加深层次的JavaScript的深拷贝和浅拷贝的问题。有对这个概念不清楚的，可以百度查看一下。还不清楚的可以问我，如果有需要我后面再写一个关于这个话题的帖子，这里就不深入了。

然后写完了服务。我们在界面上增加一个按钮

<button ng-click="openModal()">弹出确认框</button>

然后只要在对应的控制器里面ModalService.initModal($scope);就可以了。注意上面的点击事件和服务里的事件名字相同时可以直接绑定，名字不同时需要再控制器里面重新写方法。

这样就能实现在多个界面中使用同一个模板了。

这里再扩展的说一点，可能不同的界面点击确认之后会有自己的响应事件。那么可以在initModal里传入callback，然后在点击关闭的时候响应callback就可以了。

代码如下：（Demo里面的代码不包括callback，尽量使Demo简单易懂）

调用：ModalService.initModal($scope,callback);

 var initModal = function ($scope,callback) {
            var modal = $ionicModal.fromTemplateUrl('templates/modal.html',{
                scope:$scope,
                animation:'slide-in-up'
            }).then(function (modal) {
                $scope.modal = modal;
                return modal
            });
            $scope.openModal = function () {
                $scope.modal.show();
            };
            $scope.closeModal = function () {
                callback&&callback()
                $scope.modal.hide();
            };
            $scope.$on('$destroy', function () {
                $scope.modal.remove();
            });
            return modal;
        };
        return {
            initModal : initModal
        }

至此这节课的内容基本上就说完了。

项目Demo地址：http://pan.baidu.com/s/1czBiyU
如果你还有什么其他的问题,可以通过以下方式找到我

新浪微博:小虎Oni
微信公众号:ionic__