这是此问题的后续问题:具有焦点的AngularJS输入会杀死列表的ng-repeat过滤器
基本上我的代码使用AngularJS弹出右侧的div(抽屉)来过滤事物列表.大多数情况下,这是使用UI被阻止所以点击阻止div关闭抽屉.但在某些情况下,我们不会阻止UI,并且需要允许用户在抽屉外单击以取消搜索或在页面上选择其他内容.
我最初的想法是在抽屉打开时附加一个window.onclick处理程序,如果点击任何东西而不是抽屉,它应该关闭抽屉.这就是我在纯JavaScript应用程序中的表现.但在Angular中,它有点困难.
这是一个基于@Yoshi的jsBin示例的示例jsfiddle:http://jsfiddle.net/tpeiffer/kDmn8/
此示例中的相关代码段如下.基本上,如果用户点击抽屉外部,我会调用$ scope.toggleSearch,以便将$ scope.open设置回false.
代码有效,即使$ scope.open从true变为false,它也不会修改DOM.我确定这与事件的生命周期有关,或者当我修改$ scope(因为它来自一个单独的事件)它是一个副本而不是原始...
最终目标是使其成为最终可重用性的指令.如果有人能指出我正确的方向去做那件事,我将不胜感激.
$scope.toggleSearch = function () {
$scope.open = !$scope.open;
if ($scope.open) {
$scope.$window.onclick = function (event) {
closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
};
} else {
$scope.$window.onclick = null;
}
};
和
function closeSearchWhenClickingElsewhere(event, callbackOnClose) {
var clickedElement = event.target;
if (!clickedElement) return;
var elementClasses = clickedElement.classList;
var clickedOnSearchDrawer = elementClasses.contains('handle-right')
|| elementClasses.contains('drawer-right')
|| (clickedElement.parentElement !== null
&& clickedElement.parentElement.classList.contains('drawer-right'));
if (!clickedOnSearchDrawer) {
callbackOnClose();
}
}
请原谅我这个看似基本的问题,但我已经搜索了几天,找不到官方文档,说明当从iPad上的主页链接启动网页时实际发生了什么.
iOS 8.3上的JavaScript性能测试(例如:http://www.mobilexweb.com/samples/nitro.html)在Safari或固定应用程序中没有显示出明显的差异.(Chrome上约900毫秒vs 3200毫秒)
::这意味着固定的应用程序正在使用WKWebView,对吗？
但是,iOS 9中存在一个错误(https://github.com/angular/angular.js/issues/12241),它破坏了我们的AngularJS应用程序,而这个错误只在UIWebView中出现.我们可以在网页固定时重新创建错误,但不能在Safari中重新创建.
::这意味着固定的应用程序正在使用UIWebView,对吗？
或者UIWebView现在使用Nitro渲染引擎来解释这两种情况？
感谢您在寻找官方文档方面的帮助!萨德
我正在使用Jasmine为我们的控制器编写单元测试,但希望得到社区对如何处理这种情况的反馈......
我有一个控制器 - InvoiceController,像这样:
angular.module('myModule').controller('myController', ['$scope',
function($scope) {
$scope.doSomething = function() {
$scope.something = 'bar';
};
}
]});
在我的单元测试中,我验证我的控制器具有预期的方法:
it('should be able to do some work', function() {
// initialize scope properties
scope.someProperty = 'foo';
// load controller using those properties
injectController();
// do I have all of the functions necessary to do this work?
expect(typeof (scope.doSomething)).toBe('function');
// now execute test
scope.doSomething();
expect(scope.something).toBe('bar');
}
最后,在我的html中,我有一个带有ng-click的元素,如下所示:
<button ng-click="doSomehing()">Do Something</button>
看起来不错吧？但是,有没有人抓住我做错了什么？
我的ng-click方法拼写错误,但所有测试都是绿色的,生活似乎很美好......直到我尝试点击那个人并且没有任何反应.没有渲染时错误,点击没有错误.嗯.
好几次,因为我正在重构代码,这让我感到满意.我在单元测试和控制器中重命名doSomething toDoomeCooler但在html中错过了一个地方.经过一分钟的刮擦后,我发现错过了什么.
我喜欢一种确保标记有效的方法.E2E测试似乎是一个明显的解决方案,但那些容易出现脆弱性,因此我们希望有一些替代方案.
如果这是ASP.Net,我会从代码后面附加click事件,这样我就会得到编译时错误和运行时错误.
思考？
萨德
大家好-简单的CSS新手问题，但是我似乎无法输入正确的问题来问我的朋友Google。
如果内部div具有添加边框的类，那么如何将该div放入外部div并让该类覆盖这些边界？
整个事情是第三方ListBox。创建它后，我可以在后面的代码中在外部div上添加样式（ClassToOverrideBorders），但无法控制添加边框的内部div。
<style>
.UserControlStyle .ClassWithBorders
{
border: 1px solid #8e8e8e;
background: #FFF;
}
</style>
<div class="UserControlStyle ClassToOverrideBorders">
<div class="ClassWithBorders">
<bunchofcontent />
</div>
</div>
我想可以使用jQuery来做到这一点（输入，未经测试）...
$('.UserControlStyle > * .ClassToOverrideBorders').removeClass('ClassWithBorders');
有什么想法吗？有关如何实现此目的的文章链接？