jqui modal using angular-ui proxy

by danielzen

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<div ng-app="ui.directives" class="demo">


<div id="dialog-modal" title="Basic modal dialog" ui-jq="dialog" ui-options="{autoOpen: false, modal: true, height: 140, draggable: false, resizable: false , title: 'Dialog Title' }">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>

    </div> 
</div>
    
    
<a href="javascript:$('#dialog-modal').dialog('open')">Open Modal</a>
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. D

CSS

</style>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js">
</script>
<style>
.ui-widget { font-family: Helvetica,Arial,sans-serif; font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(../images/?new=ffffff&w=40&h=100&f=png&q=100&fltr[]=over|textures/01_flat.png|0|0|75) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #de167d url(../images/?new=de167d&w=40&h=100&f=png&q=100&fltr[]=over|textures/01_flat.png|0|0|100) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #de167d; background: #de167d url(../images/?new=de167d&w=40&h=100&f=png&q=100&fltr[]=over|textures/01_flat.png|0|0|100) 50% 50% repeat-x; font-weight: bold; color: #ffffff; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #ffffff; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #dadada url(../images/?new=dadada&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|75) 50% 50% repeat-x; font-weight: bold; color: #212121; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(../images/?new=ffffff&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|65) 50% 50% repeat-x; font-weight: bold; color: #212121; outline: none; }
.ui-state-active a, .ui-state-active a:link,...

JavaScript

angular.module("ui.directives", [])
  .directive('uiJq', function () {
    return function(scope, elm, attrs) {
        if (attrs.uiOptions) {
            elm[attrs.uiJq](scope.$eval(attrs.uiOptions));
        } else {
            elm[attrs.uiJq]();
        }
    };
  }
);
//   $(function() {
//       $( "#tabs" ).tabs();
//   });