Is there a way to show selected item when ionic modal pops up?

[gigocabrera]

Continuing the discussion from Ionic modal service with extras:

@julianpaulozzi

Based on this solution: Ionic modal windows from service and the fact that it needed a more practical way to create and display modals with some features below:

• Pass parameters;
• Set an independent controller;
• Get results after completing / close the modal;
• Use promises to get the result;
• Isolate the scope of the modal;
• Release the resource when not using it;

I created this little service that I think can be useful…

CodePen

(function () {
'use strict';

var serviceId = 'appModalService';
angular.module('app').factory(serviceId, [
    '$ionicModal', '$rootScope', '$q', '$injector', '$controller', appModalService
]);

function appModalService($ionicModal, $rootScope, $q, $injector, $controller) {

    return {
        show: show
    }

    function show(templateUrl, controller, parameters) {
        // Grab the injector and create a new scope
        var deferred = $q.defer(),
            ctrlInstance,
            modalScope = $rootScope.$new(),
            thisScopeId = modalScope.$id;

        $ionicModal.fromTemplateUrl(templateUrl, {
            scope: modalScope,
            animation: 'slide-in-up'
        }).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();

        }, 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;
    }


} // end
})();

To use:

appModalService
.show('<templateUrl>', '<controllerName> or <controllerName as ..>', <parameters obj>)
.then(function(result) {
    // result
}, function(err) {
    // error
});

In controller is possible to obtain the parameters injecting ‘parameters’ and close passing the result for ‘closeModal (result)’;

Can use another service to centralize the configuration of all modals:

angular.module('app')
.factory('myModals', ['appModalService', function (appModalService){

var service = {
    showLogin: showLogin,
    showEditUser: showEditUser
};

function showLogin(userInfo){
    // return promise resolved by '$scope.closeModal(data)'
    // Use:
    // myModals.showLogin(userParameters) // get this inject 'parameters' on 'loginModalCtrl'
    //  .then(function (result) {
    //      // result from closeModal parameter
    //  });
    return appModalService.show('templates/modals/login.html', 'loginModalCtrl as vm', userInfo)
    // or not 'as controller'
    // return appModalService.show('templates/modals/login.html', 'loginModalCtrl', userInfo)
}

function showEditUser(dataParams){
    // return appModalService....
}

}]);

Continuing the discussion from 1 SideMenu, Multiple Ion View Headers:

@Melina

No one to help me with this?

Or at least maybe give me another forum subject speaking of something similar?

I read the whole ionic doc, however difference between css and js ionic component use cases can be fuzzy

In code examples, we often see the two methods and it’s often working whichever way

Am I the only one wanting dynamic app header (button, form, text, …) depending on the view but the same abstract layout (in this case the same side-menu)? sort of sub-layout?

Thanks in advance

Continuing the discussion from Form Date Picker:

@mica

The ios-behaviour (to show a datepicker for input type =“date”) is a standard ios-webstackbehaviour and its independent from ionic. Android doesn’t have such a implementation out of box. So you have to use a Plugin to get things work like you would expect it on ios. I use this one, but there are couple of other DatePickers out there:
GitHub - mrfoh/cordova-datepicker-plugin: Datepicker for Apache Cordova

Continuing the discussion from Form Date Picker:

@johnsonqu

Hi Lomas,

It looks great. Any plan to include time picker?

Continuing the discussion from Calendar control for ionic:

@efranco

This works directly of the box!
I have downloaded and tested several date pickers and this one just works, especially adding it as a modal.

This one looks to be most recent:

Continuing the discussion from Ion-radio not in scope [solved]:

@perry

Hey Jorre,

Few things, when using ng-model, you need to use ng-value. Also, ng-value is parsed by angular, so for strings you have to wrap it in extra quotes like: ng-value=“‘red’”. Lastly, angular directives like ion-radio have their own scope, so to get in the main controller’s scope, you have to reference $parent.formData.gender. Here’s an example.

http://codepen.io/perrygovier/pen/kfBct

Continuing the discussion from Ion-list with checkbox breaks when adding visible reorder button:

@petewritescode

Hi Mike, thanks for the reply. Sorry to hear it’s not an easy fix! I think I’ll look into using custom styling within the items and just use Ionic for the list and reordering functionality. I’ll keep an eye on the issue as it would be good to use the default Ionic items.

Cheers,

Pete

Continuing the discussion from How to add buttons to ion-nav-bar dynamically?:

@mikeyg6754

The only clear way I’ve found to change the buttons in the ion-nav-bar
is the ion-nav-buttons directive that you can place in your templates.

ion-nav-buttons - Directive in module ionic - Ionic Framework

Continuing the discussion from Form Date Picker:

@max

Nothing yet, but you can use the built in <input type="date"> which will open in a native date picker. Does that help?

Continuing the discussion from Form Date Picker:

@gregorypratt

http://i.imgur.com/D26HJDp.png - this might help explain! I suspect it might be out of your control though!

Continuing the discussion from Ionic SelectBox:

@mhartington

Very nice, forked it and updated it to use ion-modal-view instead of div.modal.

http://codepen.io/mhartington/pen/KobJE

All the animations that are associated with a modal are usable here, I think there maybe a problem with slide-in-right to be honest.

As for the cursor, I added a class to the input and just set it’s cursor to inherit.

In your demo, if I select “value 2” for example and click the field again, I want to see “value 2” option selected in the modal pop up as a visual reminder of my previous selection.