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:
-
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'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:
- app = angular.module("myApp", ["ngModal"])
This is the whole js file:
-
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 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?
