I'm trying to set a list of two items that open separate modal dialogs in a node.js app. I'm using Jade.
Here's the Jade:
I'm using Adam Brecht's modal dialog plugin. I have the js file and the css files attached.
I changed the declaration of the module in the js file to this:
This is the whole js file:
I have the list set as a dropdown in my CSS. I wanted the form to display in a modal dialog when the link in the list is clicked, but at the moment the form displays below the dropdown box.
I have a module error in Chrome Dev Tools. I have the ng-Route module declared at the top of the ng-modal.js file. Is that not where it goes? What am I missing?
Here's the Jade:
Code:
button.login-button(type='button' ng-app='ng-modal') Login ul li(open-dialog='modal-to-open') Login // JUST WORKING ON SIGN UP FOR NOW li Sign Up modal-dialog(show='dialogShown' dialog-title='My Dialog' height='100px' width='100px') p Working div.loginForm form(name='loginForm' method='post' action='#' enctype='text/plain') label(for='user') Username or Email input(type='text' name='username' id='username' size="39" placeholder='Username or Email' required) label(for='password') Password input(type='password' name='password' id='password' size='39' placeholder='Password' required)
I changed the declaration of the module in the js file to this:
Code:
app = angular.module("myApp", ["ngModal"])
Code:
var app = angular.module('app', ['ngRoute']); (function() { var app; app = angular.module("myApp", ["ngModal"]) app.provider("ngModalDefaults", function() { return { options: { closeButtonHtml: "<span class='ng-modal-close-x'>X</span>" }, $get: function() { return this.options; }, set: function(keyOrHash, value) { var k, v, _results; if (typeof keyOrHash === 'object') { _results = []; for (k in keyOrHash) { v = keyOrHash[k]; _results.push(this.options[k] = v); } return _results; } else { return this.options[keyOrHash] = value; } } }; }); app.directive('modalDialog', [ 'ngModalDefaults', '$sce', function(ngModalDefaults, $sce) { return { restrict: 'E', scope: { show: '=', dialogTitle: '@', onClose: '&?' }, replace: true, transclude: true, link: function(scope, element, attrs) { var setupCloseButton, setupStyle; setupCloseButton = function() { return scope.closeButtonHtml = $sce.trustAsHtml(ngModalDefaults.closeButtonHtml); }; setupStyle = function() { scope.dialogStyle = {}; if (attrs.width) { scope.dialogStyle['width'] = attrs.width; } if (attrs.height) { return scope.dialogStyle['height'] = attrs.height; } }; scope.hideModal = function() { return scope.show = false; }; scope.$watch('show', function(newVal, oldVal) { if (newVal && !oldVal) { document.getElementsByTagName("body")[0].style.overflow = "hidden"; } else { document.getElementsByTagName("body")[0].style.overflow = ""; } if ((!newVal && oldVal) && (scope.onClose != null)) { return scope.onClose(); } }); setupCloseButton(); return setupStyle(); }, template: "<div class='ng-modal' ng-show='show'>\n <div class='ng-modal-overlay' ng-click='hideModal()'></div>\n <div class='ng-modal-dialog' ng-style='dialogStyle'>\n <span class='ng-modal-title' ng-show='dialogTitle && dialogTitle.length' ng-bind='dialogTitle'></span>\n <div class='ng-modal-close' ng-click='hideModal()'>\n <div ng-bind-html='closeButtonHtml'></div>\n </div>\n <div class='ng-modal-dialog-content' ng-transclude></div>\n </div>\n</div>" }; } ]); }).call(this);
I have a module error in Chrome Dev Tools. I have the ng-Route module declared at the top of the ng-modal.js file. Is that not where it goes? What am I missing?
Comment