我正在显示一个Bootstrap模式窗口,用于在执行AJAX调用时加载.当加载模式应该显示时,我播放"progress.init"事件,当我想要隐藏模态时,我播放"progress.finish".在某些条件下,模态在显示后会非常快速地隐藏,从而导致模态背景保留在屏幕上.隐藏元素的后续调用不会删除背景.我也不能简单地删除所有背景,因为其他模态窗口可能会在加载窗口上显示.我已经把一个jsfiddle放在一起,只需调用模态函数(而不是触发事件)来演示问题.
var loadingModal = $("#loadingModal");
$("#btnShow").click(function () {
loadingModal.modal("show");
//hide after 3 seconds
setTimeout(function () {
loadingModal.modal("hide");
}, 3000);
});
$("#btnProblem").click(function () {
//simulate a loading screen finishing fast, followed by another loading screen
loadingModal.modal("show");
loadingModal.modal("hide");
loadingModal.modal("show");
//Again simulate 3 seconds
setTimeout(function () {
loadingModal.modal("hide");
}, 3000);
});
和HTML:
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Loading...</p>
</div>
</div>
</div>
</div>
<button id="btnShow">Show Loading</button>
<button id="btnProblem">Cause show/hide problem</button>
理想情况下,我想在调用modal("hide")之前不等待指定的时间来解决这个问题.换句话说,我想尽量避免这样的事情:
elem.on("progress.finish", function () {
window.setTimeout(loadingModal.modal("hide");
}, …无论如何要改变发送到单元测试模块的配置功能的常量值吗？
我有以下(在这里小提琴):
//--- CODE --------------------------
var module = angular.module("myApp", []);
module.constant("myConstant", "foo");
module.provider("awesomeStuff", function () {
var value;
this.setValue = function (val) {
value = val;
};
this.$get = function () {
return {
myValue: value
};
};
});
module.config(function (myConstant, awesomeStuffProvider) {
//want to mock myConstant
awesomeStuffProvider.setValue(myConstant);
});
//--- SPECS -------------------------
describe("foo", function() {
beforeEach(angular.mock.module("myApp", function ($provide) {
//Attempt to override the myConstant value that gets passed to config
$provide.constant("myConstant", "bar");
}));
it("has a value of bar", …我们有一个用于电子邮件的正则表达式.我们的应用程序继承了正则表达式,所以它可能不是一个选项来切换它...无论如何,同样的一组步骤似乎会使浏览器中的javascript崩溃.我已经能够在IE和Chrome中重现,但不能在Firefox中重现.这是代码:
var mod = angular.module("myApp", []);
mod.controller("MainCtrl", function ($scope) {
//Pattern that blows up the browser during ng-pattern
$scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)@((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?){1,})+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;
});
HTML:
<div ng-app="myApp" ng-controller="MainCtrl">
<form name="emailForm" novalidate>
<input type="text" ng-model="user.email" name="email" maxlength="80" required ng-pattern="emailPattern">
</form>
<br>
{{user.email}}
</div>
小提琴这里.以下是导致浏览器崩溃的基本步骤:
这将使IE和Chrome一直崩溃.以前有人遇到过这个bug吗？任何已知的解决方法？
我试图使用CSS Flexbox(display:flex)来占用窗口的剩余高度.我也希望滚动可用...也许我一直在想这个错误,但一直在寻找这么长时间以至于其他选项都没有找到我.
这个想法是有一个固定的容器.在该固定容器内是一个占据100%高度的弹性盒.我将项目添加到堆叠在列中的弹性框中.我添加的最后一项(容器包装器)里面有动态内容,它将通过AJAX调用替换HTML(否则我只需将操作栏移到包装器之外并完成它).此内容包装器也是一个flex容器(以及一个flex项),并设置为随窗口高度增长和缩小.这个flex容器的最后一项应该允许在窗口缩小时滚动.
<!-- The fixed container -->
<div class="fixed">
<!-- The first flex container - direction: column -->
<div class="outer">
<div class="some-flex-item"></div>
<div class="some-flex-item"></div>
<!-- Grow and shrink with 100% of height -->
<div class="container-wrapper">
<!-- inner HTML is dynamic -->
<!-- flex: 0 0 auto -->
<div class="action-bar"></div>
<!-- Want this div to take up remaining height of window
and have overflow-y scrolling -->
<div class="container">
...
</div>
</div>
</div>
</div>
似乎可以在IE 10 +,Chrome中使用,但Firefox不会添加滚动条,因为容器包装器的高度由于内部内容而无限制地增长.我应该提一下,旧版本的Firefox显示正确(我认为~33),但更新版本没有.
我找到了一个解决方法,我在其中创建内部容器位置:relative然后将其内部内容包装在div中,绝对定位设置为0,分别为top,left,bottom,right.这里的例子 …