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

1. .factory('ModalService', function ($ionicModal) {  
2.         var initModal = function ($scope) {  
3.             var modal = $ionicModal.fromTemplateUrl('templates/modal.html',{  
4.                 scope:$scope,  
5.                 animation:'slide-in-up'  
6.             }).then(function (modal) {  
7.                 $scope.modal = modal;  
8.                 return modal  
9.             });  
10.             $scope.openModal = function () {  
11.                 $scope.modal.show();  
12.             };  
13.             $scope.closeModal = function () {  
14.                 $scope.modal.hide();  
15.             };  
16.             $scope.$on('$destroy', function () {  
17.                 $scope.modal.remove();  
18.             });  
19.             return modal;  
20.         };  
21.         return {  
22.             initModal : initModal  
23.         }  
24.     })  

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

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

举个简化的例子来说明

[javascript]  view plain  copy

1. var Math = {};  
2. function mathFunc (math){  
3.     math.add = function (a,b) {  
4.         return a+b;  
5.     };  
6.     math.sub = function (a,b) {  
7.         return a-b;  
8.     }  
9.     return math.sub;  
10. }  
11. //这里需要注意的是mathFunc返回的是减法的函数  
12. var sub = mathFunc(Math);  
13. //我们这里先使用的是我们最开始定义的Math  
14. var sum = Math.add(1,2);  
15. //打印出来：3  
16. console.log(sum);  
17. //这个很好理解的，打印出来：1  
18. var AsubB = sub(2,1);  
19. 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

1. var initModal = function ($scope,callback) {  
2.            var modal = $ionicModal.fromTemplateUrl('templates/modal.html',{  
3.                scope:$scope,  
4.                animation:'slide-in-up'  
5.            }).then(function (modal) {  
6.                $scope.modal = modal;  
7.                return modal  
8.            });  
9.            $scope.openModal = function () {  
10.                $scope.modal.show();  
11.            };  
12.            $scope.closeModal = function () {  
13.                callback&&callback()  
14.                $scope.modal.hide();  
15.            };  
16.            $scope.$on('$destroy', function () {  
17.                $scope.modal.remove();  
18.            });  
19.            return modal;  
20.        };  
21.        return {  
22.            initModal : initModal  
23.        }  

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

项目Demo地址：http://pan.baidu.com/s/1czBiyU

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