Request for enhancement: angular-patternfly-style modal directive

[merlinthp]

I want to use modals in my angular-pf application, and it'd be nice to have a directive to take a lot of the repetitive work and boilerplate HTML out of it. angular-bootstrap has a modal service, but it doesn't really seem to match the angular-pf style. The modal service needs to be fed a full template to create the modal from, including all the boilerplate, whereas existing angular-pf directives appear to be more geared around supplying that boilerplate for you.

A hypothetical directive could look like this:

<div pf-modal modal-name="mymodal" modal-title="This is a modal" ok-label="Do it" ok-type="danger">
    Modal body content here.
</div>

Alternatively, it could be more based around the configuration object pattern that some of the more complex angular-pf directives use:

<div pf-modal config="configobject">
    Modal body content here.
</div>

$scope.configobject = {
    name: 'mymodal',
    title: 'This is a modal',
    okButton: {
        label: 'Do it',
        type: 'danger'
    }
};

In both those examples, the OK button type would map to the btn-<type> Bootstrap button class for the OK button. The latter pattern would make more sense if we want something a bit more configurable than a simple OK/Cancel button pair on the modal, with something more like the button config objects used by pfToolbar and pfListView.

Displaying the modal could be controlled via a service similar to the angular-bootstrap modal service, which would return a modal object with one or more promise properties (and methods to close/dismiss the modal programmatically). You'd use it in a similar fashion to this:

mycontroller.controller('mycontroller', ['$scope', 'pfModal',
    function($scope, pfModal) {
        // show the modal with the name 'mymodal'
        var modal = pfModal.show('mymodal');

        // modal object has a result property of type promise
        modal.result.then(function(result) {
            // do something when the user hits ok
        }, function(reason) {
            // or when they hit cancel
        });
    }
]);

Alternatively (and especially if the config object pattern is used), rather than using a return object with promises we could supply functions to call when the modal is closed/dismissed:

$scope.configobject ={
    ...
    onClose: function() { ... },
    onCancel: function() { ... }
};

I've had a go at doing an implementation myself (using the directive and service pattern), but my angular knowledge doesn't appear to be up to the job yet. If someone really wants to see my (likely quite terrible) code, I can make it available for ridicule.

I think it'd be really useful to get some sort of modal directive into angular-pf, even if the interface doesn't look like the above :)

[dtaylor113]

Possible duplicate of #673