个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想将“dialog”类的 div 作为 Angular 指令中的 JQLite 元素进行访问。我无法使用element.find('div')因为我的模板中有另一个div。
根据此人的问题 ( AngularJS: How to .find using jqLite? )我尝试使用 angular.element(elem.querySelector('.dialog'))但我不知道什么elem应该是。我也尝试过使用
var body = element.find('body')
var dialog = body.children().eq(0);
但这似乎也不起作用。
我的 HTML 代码在这里；它链接到模板为 templateUrl :
<body>
<div class='dialog' ng-style="{'width': model.width+'px', 'height': model.height+'px', 'top':model.top+'px', 'left':model.left+'px', 'z-index': model.zindex}"
ng-mousedown='zorder()'>
<span class='topbar'>
<button id='minimize' ng-click="minimize()"> _ </button>
</span>
<div>
<ng-include src=model.template></ng-include>
</div>
<span class='drag'></span>
</div>
</body>
这是我的指令代码的基本结构:
angular.module('root', [])
.controller('index', ['$scope', function($scope){
$scope.dialogs = [
{
minimized: false,
width: 200,
height: 300,
top: 5,
left: 5,
zindex: 1,
template: 'experiment-dialog.html'
}]
}])
.directive('makeDialog', function($document) {
return {
restrict: 'E',
scope: {
model: '=',
dialogs: '='
},
templateUrl: 'dialog.html',
link: function(scope, element, attrs) {
//jqlite elements
var dialog = angular.element(elem.querySelector('.dialog'));
var topBar = dialog.children().eq(0);
var drag = dialog.children().eq(2);
dialog.css('border', 'solid purple') //fails to give dialog elements purple border
};
});
任何帮助将不胜感激。如果您需要更多信息，请告诉我!
最佳答案
链接函数中有 element 对象，它是 element 指令绑定(bind)到的 jqLite 实例。为了能够使用 native 浏览器 DOM 方法，您需要使用纯 HTMLElement 对象，您可以通过其索引从 jqLite 中提取该对象。
所以你应该在链接函数中使用element，如下所示:
link: function (scope, element, attrs) {
var dialog = angular.element(element[0].querySelector('.dialog'));
var topBar = dialog.children().eq(0);
var drag = dialog.children().eq(2);
dialog.css('border', 'solid purple');
};
关于jquery - 在 JQLite 中查找元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31617612/
25
4
0
我正在使用一个 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
我是一名优秀的程序员,十分优秀！