Last active
December 4, 2015 00:37
-
-
Save landed1/9361d68a90e87a2b92cf to your computer and use it in GitHub Desktop.
Angular Modal directive using Refils
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Using this modal found here - http://refills.bourbon.io/components/ copy the css as is and note the source of the custom modal directive will be the html plus some amends shown below. | |
| add the modal (modal-dialog tag) to your Angular template file and add a couple of native directives to the body tag | |
| ex | |
| <body ng-app="baApp" ng-controller="MainCtrl" data-ng-init="init()" ng-class="{open: modalFlag, closed: !modalFlag}"> | |
| <modal-dialog></modal-dialog> | |
| (create a new template file 'modal.html') add code to modal.html | |
| <div class="modal"> | |
| <label for="modal-1"> | |
| <div class="modal-trigger">Click for Modal</div> | |
| </label> | |
| <input class="modal-state" id="modal-1" ng-model="checkboxModalModel" ng-click="modalChange($event)" type="checkbox"/> | |
| <div class="modal-fade-screen" ng-click="closeModal($event)"> | |
| <div class="modal-inner"> | |
| <div class="modal-close" for="modal-1" ng-click="closeModal($event)"></div> | |
| <h1>Modal Title</h1> | |
| <p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p> | |
| <p class="modal-content">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p> | |
| </div> | |
| </div> | |
| </div> | |
| you will now need to define the custom directive thus.. | |
| baApp.directive('modalDialog', function() { | |
| return { | |
| restrict: 'E', | |
| scope: true, | |
| replace: true, // Replace with the template below | |
| transclude: true, // we want to insert custom content inside the directive | |
| link: function(scope, element, attrs) { | |
| scope.dialogStyle = {}; | |
| if (attrs.width){ | |
| scope.dialogStyle.width = attrs.width; | |
| } | |
| if (attrs.height){ | |
| scope.dialogStyle.height = attrs.height; | |
| } | |
| scope.closeModal = function(context){ | |
| context.stopPropagation(); | |
| scope.checkboxModalModel = !scope.checkboxModalModel; | |
| } | |
| scope.modalChange = function(context){ | |
| scope.$parent.$parent.modalFlag = scope.checkboxModalModel; | |
| }; | |
| }, | |
| templateUrl:'/views/modal.html' | |
| }; | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am no longer depending on the body tag css hook (the modal box relies on the input checked state)
It's a lot cleaner and I will update this or link to the github in due course. Just message me if you need some clarification or comment.