Have ionicModal return something in promise

[ikkyusan]

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

Plunker

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');
            }
        }
    }
]);