$dialog MessageBox -- should autofocus primary button, so [ENTER] or [SPACEBAR] works

[fredsa]

1. Run the sample code from http://angular-ui.github.com/bootstrap/#/dialog

   var title = 'This is a message box';
   var msg = 'This is the content of the message box';
   var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}];

   $dialog.messageBox(title, msg, btns)
   .open()
   .then(function(result){
   alert('dialog closed with result: ' + result);
   });

2. Attempt to accept the default action using the keyboard -> Nothing happens

Possible way to improve message box:

• recognize the 'btn-primary' class and set the 'autofocus' attribute automatically

• add an additional 'autofocus' property, e.g.

  var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary', autofocus: true}];

Additional ideas:

• add general purpose keyboard shortcut (hotkey) functionality, e.g.

  var btns = [{result:'cancel', label: 'Cancel', 'hotkey': 'c'}, {result:'ok', label: 'OK', cssClass: 'btn-primary', hotkey: 'o'}];

[fredsa]

I tried writing an autofocus directive as a workaround:

.directive('autofocus', function() {
  return {
    restrict: 'C',
    compile: function compile(tElement, tAttrs) {
      return function postLink(scope, iElement, iAttrs) {
        iAttrs.$set('autofocus', 'true');
      };
    },
  };
})

and then inserting 'autofocus:please' in 'cssClass' as so:

var btns = [{result: false, label: 'Cancel'},
            {result: true, label: 'OK',
             cssClass: 'btn-primary btn-danger autofocus:please'}];

but I find that 'autofocus="true"' does not get added to resulting OK button in this case, although it does work when used in straight up HTML:

<input class='autofocus:please'>

[ajoslin]

Working on substantial $dialog / modal refactorings in scope of #441