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 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' | |
| }; | |
| }); | |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You will also need to specify modalFlag somewhere suitable I chose my main controller - because the body tag can then bind easily to it..there may be a more correct way to set it in the scope of the modal directive but then binding to that boolean I found less easy to know how to do..
$scope.modalFlag = false; //true - modal is open so need to set 'open' on body tag to keep in with the refils css and method.