- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我有以下 Angular 指令自动聚焦 Ionic 应用程序当前页面上的第一个 input
字段。当第一个字段未被隐藏时,它工作得很好。但是,如果它被 ng-hide
隐藏,逻辑就会失败。因此需要修改元素选择器以仅查找我的指令中的可见元素。
angular.module('myApp').directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element.find('label')[0].focus();
}, 150);
}
};
});
在 form
元素上使用上述指令,如下所示,
<form name="signinForm" ng-submit="signinForm.$valid && doSignin(credentials)" novalidate focus-me>
那么我应该如何更改我的 jQLite 查找查询以仅查找可见元素?根据文档,查找查找受标签名称限制。
最佳答案
你可以这样写:
element[0].querySelector('input:not(.ng-hide)').focus();
jQLite 只允许通过标签名称进行选择。所以我们可以使用纯 Javascript 版本,即 querySelector
以及使用 :not
选择器。
请参阅下面的工作示例:
angular.module('myApp', [])
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].querySelector('input:not(.ng-hide)').focus();
}, 150);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form focus-me ng-app="myApp">
<input type="text" name="firstName" ng-show="false" />
<input type="text" name="lastName" ng-show="true" />
<input type="text" name="email" />
</form>
关于javascript - 你如何在 AngularJS 下使用 jqlite 找到第一个可见元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34237681/
我正在使用一个 Angular Directive(指令),但我对 jQlite .find() 方法没有任何运气: 指令 function cardsList () { return {
有没有比下面更干净的方法来迭代一组 jqlite 元素? var els = angular.element(document.getElementById("main").children); //
考虑这个可运行的示例:为什么 el4 不放在 el3 之后?如果我调试并打印 el3 ,那么 el4 似乎已经消失了。如何将一个元素放在另一个元素后面,以便它们成为兄弟元素? 编辑:我不想在调用 .a
我试图在单元测试的选择框中突出显示 1 个或多个项目。我正在使用 Karma、Jasmine 和 PhantomJS、AngularJS、JQLite、CoffeeScript。 我的列表有项目 [“
我想将“dialog”类的 div 作为 Angular 指令中的 JQLite 元素进行访问。我无法使用element.find('div')因为我的模板中有另一个div。 根据此人的问题 ( An
我已经使用 angularjs 指令创建了一个下拉菜单,该指令工作正常,现在我在指令本身中编写了所有的 css,在其中一个功能中,当鼠标悬停在下拉列表选项时,它应该改变背景颜色为 #27A1EC -
我正在研究一个指令,该指令将基于 rootScope 变量禁用页面上的所有表单元素(类似于手动将 ng-disabled 添加到每个项目,但只是一种更方便的方法。我正在修改现有的应用程序,不想挖掘一堆
我尝试使用 jqlite 来显示一些元素,但目前我遇到了问题childs 当鼠标悬停时显示内容。我将把我尝试的代码和原来的 jquery 代码放在一起。
我查看了多个线程并尝试了多种解决方案。 坦率地说,我认为我正在失去理智。 我有一个带输入的 ng-repeat。所有需要发生的是,当用户按下 Enter 键时,它应该将焦点转移到下一个输入,基本上模拟
我希望 AngularJS 默认使用 jQuery 而不是 jQLite。是否可以?因此在指令链接函数中: link: function (scope, element, attrs, ngMode
我的页面中有一个 Accordion ,当我单击 Accordion 时,我喜欢屏幕移动并滚动到 Accordion 标题的顶部。 Accordion 的结构是这样的: "My XY
因此,我有以下 Angular 指令自动聚焦 Ionic 应用程序当前页面上的第一个 input 字段。当第一个字段未被隐藏时,它工作得很好。但是,如果它被 ng-hide 隐藏,逻辑就会失败。因此需
我目前正在开发一个 Angular SPA 元素,该 SPA 在其主导航栏中具有下拉菜单。为了获得这种效果,我们使用 CSS:悬停选择器。问题是,当在此下拉列表中执行操作时,我们希望在不妨碍再次打开它
在为 Angular View 编写 Mocha/Chai 测试时,我发现 jqlite(因为我没有使用 jQuery)无法找到顶级元素。 我将其归结为一个简单的示例: /* jshint expr:
我有一个自定义指令,其中包含带有 Angular 对象的 DOM 元素,我想知道如何定位该对象的值。例子如下: app.directive('x', function() { return { s
我偶尔会发现一些插件试图检测 JQuery 是否存在,或者是否有 1-2 行代码使用 $。我想知道是否有可能以某种方式使 Angular 的 JQLite 在 Angular 应用程序之外可用?我第一
我需要在 $element 上做一些 dom 遍历,但是 jQuery 或 jQlite 不能开箱即用,所以我需要使用一个名为 closestChild 的 jQuery 插件。 https://gi
我创建了一个工厂来预加载图像。我在这家工厂的某个地方使用: var image = $( new Image() ) .load(
Angularjs 使用very stripped version on jQuery称为 jQLite(或某些网站中的 mini-jQuery)。如果您添加对主 jQuery 的引用,Angular
我从 Angular 和一般 Angular 单元测试开始。我有一个如下所示的 href: × 然后在我的单元测试中, var element = angular.element(""); compi
我是一名优秀的程序员,十分优秀!