Have ionicModal return something in promise


#1

Hi, I was wondering if it would possible to get ionicModal to work more like angular-ui’s modals ?

Like, having the ability to put something in the promise returned when the modal is closed ?

Also, how can I know that the modal instance has closed without having to listen to the ‘hide’ event ?

Here’s a simplified example of what I did in another project (that doesn’t use Ionic).

This is the kind of working I’d like to have with ionicModal. Is it possible to do the same thing with Ionic ?
The important part is ArticleService, where the modal instance returns a promise.

Code added here for convenience :

index.html

<h1>Article List</h1>
    <div ng-repeat="article in articleList" ng-click="removeArticle(article)">
      {{ article.id }} - {{ article.name }} -- {{ article.description }}
    </div>
    <button ng-click="addArticle()">Add article</button>
    <div>{{ message }}</div>
    
    <script id="articlePicker.html" type="text/ng-template">
      <style>
        .selected {border: 1px solid #bebebe;}
      </style>
      <div ng-repeat="article in articleChoices" ng-click="selectArticle(article)" ng-class="{'selected': article.selected}">
        {{ article.id }} - {{ article.name }} -- {{ article.description }}
      </div>
      
      <button ng-click="submit()">done</button>
    </script>

script.js

var app = angular.module('app', ['ui.bootstrap']);

app.controller('ArticlesCtrl', ['$scope', 'ArticleService',
    function($scope, ArticleService){

        $scope.articleList = [];

        $scope.addArticle = function(){
            ArticleService.showPicker()
            .then(
                function(newArticle){
                  $scope.message = '';
                    $scope.articleList.push(newArticle);
                },
                function(){
                    $scope.message = 'No article added !';
                }
            )
        }
        
        $scope.removeArticle = function(article){
          var ind = $scope.articleList.indexOf(article);
            $scope.articleList.splice(ind, 1);
        }
    }
]);

app.factory('ArticleService', ['$q', '$modal',
    function($q, $modal){
        return{
            showPicker: function(){
                var deferred = $q.defer();
                var modalInstance = $modal.open({
                    templateUrl: 'articlePicker.html',
                    controller: 'ArticlePickerCtrl',
                    backdrop: 'static'
                });
                modalInstance.result.then(
                    function(article){
                        deferred.resolve(article);
                    },
                    function(){
                        deferred.reject();
                    }
                );
                return deferred.promise;
            }
        }
    }
]);

app.controller('ArticlePickerCtrl', ['$scope', '$modalInstance',
    function($scope, $modalInstance){

        $scope.selectedArticle = null;

        $scope.articleChoices = [
          {id: 1, name: 'Article One',description: 'This article is awesome'},
            {id: 2, name: 'Article Two', description: 'This article is also awesome'},
            {id: 3, name: 'Article Three', description: 'You get it now, all our articles are awesome'},
            {id: 10, name: 'Article Ten', description: 'Really'},
            {id: 11, name: 'Article Eleven', description: 'Tonight, at eleven'},
            {id: 12, name: 'Article Twelve',description: 'OneTwoThree FourFive SixSevenEight Nine Ten, Eleven Twelve!'},
        ];

        $scope.selectArticle = function(article){
            if($scope.selectedArticle !== null){
              $scope.selectedArticle.selected = false;
            }
            $scope.selectedArticle = article;
            $scope.selectedArticle.selected = true; 
        }

        $scope.submit = function(){
            if($scope.selectedArticle !== null){
                $modalInstance.close($scope.selectedArticle);
            }
            else{
              $modalInstance.dismiss('no selection');
            }
        }
    }
]);