他们如何使用此angular / jqLit​​e find（）方法按属性名称和值选择元素？ ng-conf 2015

Question

在ng-conf 2015中使用Angular talk创建容器组件...参考一些翻译和自定义代码以“匹配”和“插入”用户内容到指令模板的特定/有意的元素/标签。即。 <nav t-id="menu"></nav><main t-id="body"></main>以下是他们显示正在使用的代码的地点的link。除了使用find()方法的表达式之外，大部分工作都有效。这是代码：

首先是问题var target = elem.find('[t-id="'+tId+'"]');中的语句/表达式，然后是下面的完整链接代码。

.directive('my-container-directive', function() {
  return {
    transclude: true,
    template: `...`,
    link: function(scope, elem, ctrl, transclude) {
      transclude(clone) {
        angular.forEach(clone, function(cloneEl){
          // get desired target id
             tId = cloneEl.attributes["t-to"].value;
             // find the target with that ID
             var target = elem.find('[t-id="'+tId+'"]');
             // append an el to target
             target.append(cloneEl);

        })   
      }
    }
  };
});

问题1：使用find（）对我来说没有意义，也无法让它工作。什么是[]语法;它似乎不遵循jqLit​​es（angular的api文档）或jQuery文档。例如，Angular表示find（）'限制为按标签名称查找'。

完整代码位于此plunk

中

问题1.1：您如何找到具有特定属性名称和值名称的标记？即。吨-ID = “菜单”？

Answer 1

docs（jQuery和Angular的jsLite）在他们的规范中都是正确的。查看按属性选择器

查找的语法

<强> jQuery Attribute Equals Selector [name="value"]

Angular的.find()的jsLite实现只能用于标记查找。一个例子是elem.find('div')。这将返回<div>中的elem元素。

你确定这个例子还没有使用jQuery吗？有时候，如果页面上出现了jQuery并且我们正在尝试遵循Angular的jqLit​​e实现，那么它将不再重要，因为我们可以使用所有jQuery的产品。 em>想想我们被绑定到jqLit​​e api。

以下是使用完整jQuery库

演示.find()的plunker

<div id="main">
    <div t-id="menu"></div>
</div>

---

$(function() {
    var parent = $('#main');
    var foundByAttributeLookup = parent.find('[t-id="menu"]');
    console.log(foundByAttributeLookup);
});

这可以按预期工作

JQuery Plunker

现在让我们尝试使用scular的Angular和jqLit​​e api

<div id="main">
    <div t-id="menu"></div>
</div>

---

angular.element(document).ready(function () {
    var parent = angular.element(document.getElementById('main'));
    var foundByTagLookup = parent.find('div')
    var foundByAttributeLookup = parent.find('[t-id="menu"]')

    console.log(foundByTagLookup)         // ---- good
    console.log(foundByAttributeLookup)  // ---- no good
});

当我们按属性

尝试.find()时，这会克隆

Angular Plunker

有趣的是，将它添加到角度探测器的顶部，可以正常工作

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</script>

现在引入jQuery允许.find()函数正常工作，即使我们使用诸如angular.element()之类的实践严格地将我们的所有代码精心设计到jqLit​​e api。它不再重要。< / p>

因此，这里是考虑jQuery和jqLit​​e实现的.find()限制的演示。我怀疑是你正在关注的例子...... jQuery在页面上

---

1.1

的可能答案

您可能需要进行更多手动编码才能找到您要查找的内容。这是一种可以通过属性找到元素的方法，而没有与上面的Plunker链接对齐的完整jQuery库

angular.element(document).ready(function () {
    var parent = angular.element(document.getElementById('main'));
    angular.forEach(parent.children(), function(value) {
        if(angular.element(value).attr('t-id') === 'menu') {
            console.log('found');
            console.log(value)
        }
    });
});

Plunker