AngularJS 10.7 jquery-ui wrapper

by Aaron Calderon

HTML

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />

<div ng-app="dialog">
    <div ng-controller="Ctrl">
        <h2>Hello {{username}}!</h2><br/>
        The date is: <input id="date1" type="text" ng-model="date" ng-click="showDatePicker()" /><br/>
        <a ng-click="activateDialogFromHtml()">activate jquery dialog from html</a><br/>
        <a ng-click="activateDialogFromTemplate()">activate jquery dialog from template</a>
       
        <div id="dialogInHtml" title="Dialog in Html" class="ui-helper-hidden">
            <h3>{{username}}</h3>
            <p>This is a dialog inside the controller scope, in the html.</p>
            <input type="text" ng-model="username"/>
        </div>
    </div>

<!-- angular dialog template -->
<script type="text/ng-template" id="dialog-template">
    <div id="dialogInTemplate" title="Basic dialog">
    <h3>{{title}}</h3>
        <p>This is from template in script tags.</p>
         <div class="modal-body">
        </div>
    </div>
</script>
    
</div>

CSS

</style>
<script src="http://ci.angularjs.org/job/angular.js-misko/398/artifact/build/pkg/0.10.7-f35843a9/angular-0.10.7-f35843a9.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<style>

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }
.ui-helper-hidden { display: none;}

JavaScript

var dialogApp = angular.module('dialog', []);

dialogApp.factory('jqueryUI', function ($window, $templateCache, $document, $compile) {
    return {
        wrapper: function (cssSelector, pluginName, options, templateName, dialogScope) {
            if (templateName) {
                var templateDom = $($templateCache.get(templateName));
                $document.append(templateDom);
                $compile(templateDom)(dialogScope);
            }
            $(cssSelector)[pluginName](options);
        },
        
        performAction: function(cssSelector, pluginName, action, options) {
            if(options){
                $(cssSelector)[pluginName](action, options);                                
            }else {
                $(cssSelector)[pluginName](action);                                
            }
            
        }
    };
});

function Ctrl($scope, jqueryUI) {
    $scope.username = 'Adam Webber';

    $scope.showDatePicker = function () {
        jqueryUI.wrapper('#date1', 'datepicker', {});
        jqueryUI.performAction('#date1', 'datepicker', 'show');            
    };
    
    $scope.activateDialogFromHtml = function () {
        var options = {
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        };
        jqueryUI.wrapper('#dialogInHtml', 'dialog', options);
    };

    $scope.activateDialogFromTemplate = function () {
        var options = {
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        };
        jqueryUI.wrapper('#dialogInTemplate', 'dialog', options, 'dialog-template', $scope);
    };
}