JSFiddle - React, Tailwind, and code Playground

by otupman

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-resource-1.0.1.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<div ng-app="popup">
    <div ng-controller="PopupCtrl">
         <h1>Angular and Boostrap Modal Popups</h1>

        <br /> <a ng-popup="/echo/html/">Example Load</a>

</div>

JavaScript

function PopupCtrl($scope, PopupService) {
    $scope.cancel = function () {
        PopupService.close();
    };

    $scope.doIt = function () {
        alert("you did it");
        PopupService.close();
    };

    $scope.okay = function () {
        alert("you clicked okay");
        PopupService.close();
    };
}


var directivesModule = angular.module('popup.directives', []);
directivesModule.directive('ngPopup', function (PopupService) {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var ngPopupUrl = attrs['ngPopupUrl'];
            // Could have custom or boostrap modal options here
            var popupOptions = {};
            element.bind("click", function () {
                PopupService.load(ngPopupUrl, scope, popupOptions);
            });
        }
    };
});



var servicesModule = angular.module('popup.service', []);
servicesModule.factory('PopupService', function ($http, $compile) {
    var popupService = {};

    // Get the popup
    popupService.getPopup = function (create) {
        if (!popupService.popupElement && create) {
            popupService.popupElement = $('<div class="modal hide"></div>');
            popupService.popupElement.appendTo('BODY');
        }

        return popupService.popupElement;
    }

    popupService.compileAndRunPopup = function (popup, scope, options) {
        $compile(popup)(scope);
        popup.modal(options);
    }

    // Loads the popup
    popupService.load = function (url, scope, options) {
        var htmlPage = '<div class="modal-header"><h1>Header</h1></div><div class="modal-body">Body</div><div class="modal-footer"><button class="btn btn-primary" ng-click="doIt()">Do it</button><button class="btn btn-cancel" ng-click="cancel()">Cancel</button></div>';

        $http.get(url).success(function (data) {

            var popup = popupService.getPopup(true);
            // Tried getting this to work with the echo and a post, with no luck, but...