个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我正在为一个弹出窗口使用 angularjs 指令。当我使用一次指令时它工作正常但是当我使用我不止一次时它不起作用。我不明白我做错了什么。这是我的代码。
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app='ModalDemo'>
<div ng-controller='MyCtrl'>
<button ng-click='toggleModal()'>Open First Dialog</button>
<button ng-click='toggleModal1()'>Open Second Dialog</button>
<modal-dialog info='modalShown' show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here<p>
</modal-dialog>
<modal-dialog show='modalShown1' info='modalShown1' width='400px' height='60%'>
<p>2<p>
</modal-dialog>
</div>
</body>
</html>
js
app = angular.module('ModalDemo', []);
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '=info'
},
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.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
$scope.modalShown1 = false;
$scope.toggleModal1 = function() {
$scope.modalShown1 = !$scope.modalShown1;
};
}]);
这是样本 jsbin
请帮忙。
最佳答案
我认为是这样的:
<p>Modal Content Goes here<p>
和
<p>2<p>
不关闭标签!
<p>Modal Content Goes here</p>
和
<p>2</p>
应该修复它:Working jsbin .
关于javascript - modalDialog 带有 Angular 、范围问题的指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28210753/
26
4
0
我正在使用以下代码打开模态窗口: function OpenPopup(rn) { var winargs = null; var winsettings = "help:no;s
通常当使用 window.open 打开窗口时，我可以使用 window.opener() 访问调用者窗口，是否可以在模态对话框 (window.showModalDialog) 中执行类似操作？ 最
我有一个幻灯片链接菜单(使用光滑的 slider ): Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6
我想在 modalDialog 中显示图像，但 R 不渲染图像。 以下代码仅显示指向 Google Logo 的链接，而不显示 Google Logo 本身: 服务器.R: observeEvent(
我需要一些帮助，我想使用 shinyBS 包在弹出窗口中显示我的响应式(Reactive) tabPanel。除了弹出窗口的创建之外，一切似乎都运行良好。我的灵感来自: 1) R Shiny - ad
我需要一些帮助，我想使用 shinyBS 包在弹出窗口中显示我的响应式(Reactive) tabPanel。除了弹出窗口的创建之外，一切似乎都运行良好。我的灵感来自: 1) R Shiny - ad
我有一个很长的任务正在运行，我正在弹出一个带有 MainUI.modalDialog.setVisible(true); 的模态对话框，其中有一个 ProgressBar。但是我确实观察到它正在阻止该
我有这个代码: Open Modal X Modal Box Rec Pot function checkey() { var co
我使用了一个 modalDialog，它的引用是: modalDialog 默认情况下，它固定在其位置。问题是当我的内容在这个模态中长大时，模态隐藏在不滚动的页面底部。如果我使用 position:a
我在代码中使用了 SP.UI.ModalDialog，以便在 Sharepoint 2010 应用程序中打开模式对话框。 想知道如何在加载内容时显示消息“内容加载时请稍候”，而不是在模态窗口中显示空白
我正在为一个弹出窗口使用 angularjs 指令。当我使用一次指令时它工作正常但是当我使用我不止一次时它不起作用。我不明白我做错了什么。这是我的代码。 HTML JS Bin
我想在用户从 EDITForm.aspx 保存任何文档时显示确认对话框。所以我编写了以下 JavaScript 代码。 function PreSaveAction() { var _html =
我在 wicket 9 中使用 Modal Dialog，因为旧的 Modal Window 类已被弃用，我遇到了一些问题。在 wicket 9 文档中没有 ModalDialog 的示例。不知道是我
我想在重定向到登录表单之前警告用户他的 session 已经完成。 当 session 用户完成阻止重定向直到他单击窗口时，我如何显示 modalDialog？ 最佳答案 从这里开始:http://w
在我 Shiny 的应用程序中，我想要一个带有一些文本的弹出窗口。为了使文本更具可读性，我想包含一些换行符，但到目前为止我失败了。知道我该怎么做吗？我目前正在使用 modalDialog() ui
我正在构建 WPF 客户端应用程序。我正在遵循MVC模式。 项目解决方案有很多项目，所以我创建了“ View ”和“ Controller ”单独的程序集。 “ View ”程序集引用“ Contro
我有一个带有确定和取消按钮的模态对话框。对于确定，我将Default 属性设置为True，对于取消 按钮，我将Cancel 属性设置为True。 ModalResult 分别设置为 mrOK 和 mr
我有一个旧的 Asp 经典 CMS 应用程序，为多个网站提供支持。它使用模式对话框并且仅适用于 Internet Explorer。现在它们在 IE8 中不再起作用。原因是什么？ 最佳答案 如果您的用
我在一页上有多个 ModalDialog，每个对话框都应具有不同的宽度。每个模式对话框的自定义可以在 .CSS 中进行，其中将覆盖类 .modal-dialog 我想知道如何在不接触.CSS的情况下为
我在一页上有多个 ModalDialog，每个对话框都应具有不同的宽度。每个模式对话框的自定义可以在 .CSS 中进行，其中将覆盖类 .modal-dialog 我想知道如何在不接触.CSS的情况下为
我是一名优秀的程序员,十分优秀！