javascript - 他们如何使用这个 angular/jqLit​​e find() 方法通过属性名称和值来选择元素？ ng-conf 2015

Question

在 Creating Container Components...with Angular talk at the ng-conf 2015 中。引用了一些嵌入和自定义代码，以将用户内容“匹配”和“插入”到指令模板的特定/故意元素/标签中。 IE。 <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:您如何找到具有特定属性名称和值名称的标签？ IE。 t-id="菜单"?

Answer 1

文档(jQuery 和 Angular 的 jsLite)的规范都是正确的。查看按属性选择器查找的语法

jQuery Attribute Equals Selector [name="value"]

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

你确定这个例子没有使用 jQuery 吗？有时如果 jQuery 出现在页面上并且我们试图遵守 Angular 的 jqLit​​e 实现，这将不再重要，因为我们可以使用 jQuery 的所有产品，尽管我们认为我们被绑定(bind)到jqLit​​e 接口(interface)。

这是一个 plunker 演示 .find()使用完整的 jQuery 库

<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

现在让我们用严格的 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

有趣的是，将它添加到 Angular plunker 的顶部，一切正常

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

引入 jQuery 现在允许是 .find()函数工作得很好，即使我们严格按照 jqLit​​e api 编写所有代码，使用诸如 angular.element() 之类的做法等。不再重要。

因此，这里演示了 .find() 的局限性考虑 jQuery 和 jqLit​​e 实现。我怀疑你正在关注的例子......页面上有 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