他们如何使用 angular/jqLite find() 方法通过属性名称和值 select 元素？ ng-conf 2015

Question

在 Creating Container Components...with Angular talk at the ng-conf 2015. 'match' 和 'insert' 用户内容中引用了一些嵌入和自定义代码到 specific/deliberate elements/tags 指令的模板。 IE。 <nav t-id="menu"></nav><main t-id="body"></main> 这里是 link 在他们展示正在使用的代码的地方的谈话。除了使用 find() 方法的表达式外，大部分都可以正常工作。这是代码：

首先是有问题的 statement/expression var target = elem.find('[t-id="'+tId+'"]');，然后是下面的完整 link 代码。

.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() 的使用对我来说没有意义，无法让它工作。 [] 语法是什么；它似乎不遵循 jqLites（angular 的 api 文档）或 jQuery 文档。 Angular 例如说 find() 'Limited to look up by tag name'.

完整代码在此plunk

问题 1.1:你如何找到具有特定属性名称和值名称的标签？ IE。 t-id="menu"?

Answer 1

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

jQuery Attribute Equals Selector [name="value"]

Angular 的 .find() 的 jsLite 实现只能用于标记查找。例如 elem.find('div')。这将 return <div> 个元素 elem.

你确定这个例子没有使用 jQuery 吗？有时如果 jQuery 出现在页面上并且我们试图坚持 Angular 的 jqLite 实现，这将不再重要，因为我们可以使用所有 jQuery 的尽管我们认为我们被绑定到 jqLite api.

这是一个 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

现在让我们尝试使用 scrictly Angular 和 jqLite 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() 函数工作得很好，即使我们严格地将所有代码编写到 jqLite api，使用这样的做法 angular.element() 等等。它不再重要。

因此，这里展示了 .find() 的局限性，同时考虑了 jQuery 和 jqLite 实现。我怀疑你正在关注的例子...... 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)
        }
    });
});

他们如何使用 angular/jqLite find() 方法通过属性名称和值 select 元素？ ng-conf 2015

How are they using this angular/jqLite find() method to select a element by attribute name and value? ng-conf 2015

javascript

jquery

angularjs

angularjs-directive

JQuery Plunker

Angular Plunker

1.1 的可能答案

Plunker