Basic LAB example

by otupman

HTML

<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.icon.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.icon.brand.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/theme.lungo.css">
<script src="http://lungo.tapquo.com/example/components/quojs/quo.js"></script>
<script src="https://raw.github.com/centralway/lungo-angular-bridge/master/src/lungo-angular-bridge.js"></script>
<script src="https://gist.github.com/otupman/5164465/raw/a44568ef3f87fd43c612cf957d5f697e722d8bb7/lungo.debug.js"></script>
<section id="main" > 
    <header data-title="JsFiddle Lungo">
        <nav class="left">
            <a data-icon="home"></a>
        </nav>
    </header>
    <article class="active" id="first_article">
        <script id="popup-template.html" type="text/ng-template">
            <h1>Pop up content!!!</h1>
            <strong>Data-bound content: ]<span>{{isActive}}</span>[</strong>
            <button ng-click='toggleActive()'>hi</button>
            <button ng-click="closeWindow()">Close</button>
        </script>
        
        <script id="window-template.html" type="text/ng-template">
            <header>
                <nav class="left">
                    <a data-icon="left"></a>
                </nav>
            </header>
            <article class="active">
                <h1>Pop up content!!!</h1>
                <strong>Data-bound content: ]<span>{{isActive}}</span>[</strong>
                <button ng-click='toggleActive()'>hi</button>
                <button ng-click="closeWindow()">Close</button>
            </article>
        </script>
        <strong>Simple Example</strong>
        <a href="#second_article" data-router="article">Second article</a>
        <br/>
        <a href="#second_section" data-router="section">Second section</a>
        
        <div...

JavaScript

var directivesModule = angular.module('popup.directives', []);
directivesModule.directive('ngPopup', function (PopupService) {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var templateUrl = attrs['ngPopup'];
            var popupOptions = {};
            element.bind("click", function () {
                PopupService.load(templateUrl, scope, popupOptions);
            });
        }
    };
});

directivesModule.directive('ngWindow', function (PopupService) {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var templateUrl = attrs['ngWindow'];
            var options = {};
            if(attrs['transition']) {
                options.transition = attrs['transition'];
            }
            element.bind("click", function () {
                PopupService.showWindow(templateUrl, scope, options);
            });
        }
    };
});

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

    // Get the popup
    popupService.getPopup = function (create) {
        if (!popupService.popupElement && create) {
            popupService.popupElement = $$('<div class="notification"><div class="window show"></div></div>');
            $$(window.document.body).append(popupService.popupElement);
        }

        return popupService.popupElement;
    }

    popupService.compileAndRunPopup = function (popup, scope, options) {
        
        var ngPopup = angular.element(popup[0]);
        $compile(ngPopup)(scope);
        popup.show();
    }

    // Loads the popup
    popupService.load = function (url, scope, options) {
        var htmlPage = '<div ng-include="\'' + url + '\'"></div>';

       $http.get(undefined).success(function (data) { // Uhh, why does this need to be here?!?!?!
            var autoPopup = popupService.getPopup(true);
           ...