angular.js 元素没有方法 querySelector

Question

我试图从 angular 获取一个子元素作为我的指令中的一个对象，所以我有

链接：函数（范围、元素、属性）{ var resizeBar = elem.querySelector('.resize-bar');

当我输出 elem 时，我有一个 html 对象。 但是，我得到一个错误`Object [object object] has no method 'querySelector'。

我可以使用

获取元素 var resizeBar = elem.children().children()[1];

但输出为

<div class="resize-bar">Move</div>

这不是我需要的，我需要调整大小栏的 html 对象。

有人知道用 Angular 做这个的好方法吗？

elem 的控制台输出是

: div.favor-layout.favor-layout-sideways 访问密钥：“” 对齐： ”” 属性：NamedNodeMap baseURI: "file:///C:/Users/pete/projects/favor/favor-layout/index.html" 子元素计数：1 子节点：节点列表 [2] 孩子：HTMLCollection[1] 类列表：DOMTokenList 类名：“青睐布局青睐布局横向” 客户身高：200 客户左：0 客户顶部：0 客户宽度：913 contentEditable: "继承" 数据集：DOMStringMap 目录：“” 可拖动：假 firstChild：div.favor-layout-container firstElementChild：div.favor-layout-container 隐藏：假 ID： ”” innerHTML: "↵ ↵ 这被包装了。↵ ↵ move↵↵" innerText：“这被包装了。↵move” isContentEditable: 假 朗：“” lastChild：文本 lastElementChild: div.favor-layout-container 本地名称：“div” 命名空间URI：“http://www.w3.org/1999/xhtml” 下一个元素兄弟姐妹：空 下一个兄弟姐妹：文本 节点名称：“DIV” 节点类型：1 节点值：空 偏移高度：200 左偏移：8 offsetParent：body.ng-范围 偏移顶部：8 偏移宽度：913 中止：空 onbeforecopy：空 前切：空 粘贴前：空 模糊：空 取消：空 播放：空 oncanplaythrough: null 改变：空 点击：空 关闭：空 上下文菜单：空 复制：空 oncuechange：空 切入：空 ondblclick：空 拖拽：空 ondragend: 空 ondragenter：空 ondragleave：空 ondragover: 空 ondragstart：空 ondrop：空 持续时间更改：空 已清空：空 结束：空 错误：空 焦点：空 输入：空 无效：空 onkeydown：空 按键按下：空 onkeyup：空 加载：空 加载数据：空 加载元数据：空 加载开始：空 onmousedown: 空 onmouseenter: 空 onmouseleave：空 onmousemove：空 onmouseout：空 鼠标悬停：空 onmouseup: 空 鼠标滚轮：空 粘贴：空 暂停：空 播放：空 正在播放：空 进度：空 onratechange：空 重置：空 上卷：空 搜索：空 寻求：空 寻求：无 选择：空 选择开始：空 演出：空 已安装：空 提交时：空 暂停：空 准时更新：空 onvolumechange：空 等待：空 onwebkitfullscreenchange：空 onwebkitfullscreen错误：空 车轮：空 outerHTML: "↵ ↵ 这被包装了。↵ ↵ move↵↵" outerText: "这被包装了。↵move" 所有者文档：文档 父元素：body.ng-范围 父节点：body.ng-范围 前缀：空 以前的元素兄弟：空 上一个兄弟姐妹：文本 滚动高度：200 向左滚动：0 滚动顶部：0 滚动宽度：913 拼写检查：真 样式：CSSStyleDeclaration 标签索引：-1 标记名称：“DIV” textContent: "↵ ↵ 这被包装了。↵ ↵ move↵↵" 标题： ”” 翻译：真 webkit伪：“” webkitShadowRoot：空 webkitdropzone：“” __proto__: HTMLDivElement 上下文：div.favor-layout.favor-layout-sideways 长度：1 __proto__: 对象[0]

Answer 1

试试这个，返回值是元素，不是角度元素。

var resizeBar = elem[0].querySelector('.resize-bar');

Answer 2

如果您想在指令模板中找到一个元素，可以在link 函数中使用它：

var divElement = angular.element(element[0].querySelector('#find-me'));

它将寻找#find-me id。但它只会在你的指令的模板中这样做。因此，它不会在您的指令之外返回任何具有相同 id 的元素，例如 document.querySelector("#find-me") 会。

所以，如果你在指令中使用它，它看起来像这样：

angular.module('app').directive('myDirective', function(){
    return{
        link: function(scope, element, attributes){
            var divElement = angular.element(element[0].querySelector('#find-me'));
        },
        template: function(element, attributes){
            return '<div id="find-me">' +
                        'Look at my directive' +
                    '</div>';
        }
    }
});

Answer 3

.querySelector() 是document 的一个方法。然而，既然你已经得到了elem，你可以这样做：

var currentElemClass = "." + elem.className.replace(/\s/g, ".") + " ";
var resizeBar = document.querySelector(currentElemClass + ".resize-bar");

它的作用是获取当前元素的类名，然后将其添加到document.querySelector 的开头，以便您获得准确的查询。

例如，将其应用于div.favor-layout.favor-layout-sideways，currentElemClass 变为.favor-layout.favor-layout-sideways，所以最后你得到：

document.querySelector(".favor-layout.favor-layout-sideways .resize-bar");

这是一个有效的查询。