我试图在node.js应用中设置两个打开单独模式对话框的项目列表。我正在使用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)
我正在使用Adam Brecht's模态对话框插件。我有附加的js文件和css文件。
我将js文件中模块的声明更改为:
app = angular.module("myApp", ["ngModal"])
我将列表设置为CSS中的下拉列表。当单击列表中的链接时,我希望表单显示在模式对话框中,但此时表单显示在下面的下拉框中。
我错过了什么?
编辑:这是js文件:
(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);
我刚刚意识到我还没有改变模板。