ionic modal弹窗

发表于   |   分类于   |  

今天和组员一起做弹窗，发现将弹窗抽离出的factory真心不错

modal.facotry.js 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
.factory('appModalService', ['$ionicModal', '$rootScope', '$q', '$injector', '$controller', function($ionicModal, $rootScope, $q, $injector, $controller) {
	  return {
	    show: show
	  }
	  function show(templeteUrl, controller, parameters, options) {
	    // Grab the injector and create a new scope
	    var deferred = $q.defer(),
	        ctrlInstance,
	        modalScope = $rootScope.$new(),
	        thisScopeId = modalScope.$id,
	        defaultOptions = {
	          animation: 'slide-in-up',
	          focusFirstInput: false,
	          backdropClickToClose: true,
	          hardwareBackButtonClose: true,
	          modalCallback: null
	        };
	   options = angular.extend({}, defaultOptions, options);
	
	 $ionicModal.fromTemplateUrl(templeteUrl, {
	   scope: modalScope,
	   animation: options.animation,
	   focusFirstInput: options.focusFirstInput,
	   backdropClickToClose: options.backdropClickToClose,
	   hardwareBackButtonClose: options.hardwareBackButtonClose
	 }).then(function (modal) {
	   modalScope.modal = modal;
	
	   modalScope.openModal = function () {
	     modalScope.modal.show();
	   };
	   modalScope.closeModal = function (result) {
	     deferred.resolve(result);
	     modalScope.modal.hide();
	   };
	   modalScope.$on('modal.hidden', function (thisModal) {
	     if (thisModal.currentScope) {
	       var modalScopeId = thisModal.currentScope.$id;
	       if (thisScopeId === modalScopeId) {
	         deferred.resolve(null);
	         _cleanup(thisModal.currentScope);
	       }
	     }
	   });
	
	   // Invoke the controller
	   var locals = { '$scope': modalScope, 'parameters': parameters };
	   var ctrlEval = _evalController(controller);
	   ctrlInstance = $controller(controller, locals);
	   if (ctrlEval.isControllerAs) {
	     ctrlInstance.openModal = modalScope.openModal;
	     ctrlInstance.closeModal = modalScope.closeModal;
	   }
	
	   modalScope.modal.show()
	     .then(function () {
	     modalScope.$broadcast('modal.afterShow', modalScope.modal);
	   });
	
	   if (angular.isFunction(options.modalCallback)) {
	     options.modalCallback(modal);
	   }
	
	 }, function (err) {
	   deferred.reject(err);
	 });
	
	 return deferred.promise;
	  }
	
	  function _cleanup(scope) {
	    scope.$destroy();
	    if (scope.modal) {
	      scope.modal.remove();
	    }
	  }
	
	  function _evalController(ctrlName) {
	    var result = {
	      isControllerAs: false,
	      controllerName: '',
	      propName: ''
	    };
	    var fragments = (ctrlName || '').trim().split(/\s+/);
	    result.isControllerAs = fragments.length === 3 && (fragments[1] || '').toLowerCase() === 'as';
	    if (result.isControllerAs) {
	      result.controllerName = fragments[0];
	      result.propName = fragments[2];
	    } else {
	      result.controllerName = ctrlName;
	    }
	
	    return result;
	  }
	 
	}]);

实现modal方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.factory('myModals', ['appModalService', function(appModalService){
  // all app modals here
  var service = {
    showConfirmContact: showConfirmContact,
    showContacts: showContacts
  };
  
  return service;
  
  function showConfirmContact(contact){
    return appModalService.show('confirm-contact-modal.html', 'ConfirmContactDialogCtrl as vm', contact);
  }
  
  function showContacts(otherContact) {
    return appModalService.show('contacts-modal.html', 'ContactDialogCtrl as vm', otherContact);
  }
  
  
}])

controller调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.controller('AppCtrl', ['$scope', 'myModals', function($scope, myModals) {
  var vm = this;
  vm.selectedContact = '';
  vm.openContactDialog = function(){
    myModals.showContacts({ name: 'Julian Paulozzi' })
    .then(function(result) {
      if(result && result.name){
        vm.selectedContact = result;
      }
    }, function(err) {
       alert(err);
    });
  };
  
}])

页面view调用：

1
2
3
<button ng-click="vm.openContactDialog()" class="button button-assertive button-block">
          Open contacts to select
</button>