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

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等几个方法了。

[javascript] view
plain copy

.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的一个特性，可以在任意的地方给对象附加属性和方法。

举个简化的例子来说明

[javascript] view
plain copy

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

[javascript] view
plain copy

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

--- 转自：http://blog.csdn.net/onil_chen/article/category/6113346 ---