Question

在谈话creating content container components with web components and Angular中（特别是与该问题相关的时间）ng-conf 2015，他们讨论了创建和匹配多个插入点的指令组件。（创建与Web组件插入实现匹配的行为）。好彻底的20分钟谈话，但他们似乎让它略微悬挂。例如，

// this being the html page
<my-site-container>
  <div t-to="menu">
    this displays in the menu/nav of the directive component.
  </div>
  <div t-to="body">
    this displays in the body/main of the directive component.
  </div>
</my-site-container>

// directive template

`<div id="site-container>
   <nav t-id="menu"></nav>
   <main t-id="body"></main>
 </div>"`

需要链接功能中的自定义代码。（仅使用ng-transclude进行翻译不允许匹配插入点。请参阅视频了解更多信息。）问题是他们在DDO中的链接功能代码：

return {
    transclude: true,
    template: ...,
    link: function(scope, elem, ctrl, transclude) {
            transclude(function(clone) {
              angular.forEach(clone, function(cloneEl)
                var tId = cloneEl.attributes["t-to"].value;
                var target = elem.find('[t-id="' + tId + '"]');
                target.append(cloneEl);
          });
  }
};

这对我来说并不完全有效。这是plunk。 问题1 。使用t-to属性过滤掉元素的最佳方法是什么？

var tId = cloneEl.attributes["t-to"].value; 未定义，如果您有传统的标记结构含义

// the forEach supplies empty-like node, <div..., empty-like node, <div...
<my-directive>
  <div t-to="menu">I render in the menu.</div>
  <div t-to="body">I render in the body.</div>
</my-directive>

//这个forEach提供正确，只需要div 我在菜单中渲染。我在体内渲染。 //所以看起来传统的html结构在迭代时会将空格添加为空文本节点。

我在插件中使用(cloneEl.attributes) {var tId = ...}并且似乎有效

问题2 ：在指令模板中获取具有特定名称和属性值的元素的最佳方法是什么？

var target = elem.find('[t-id="' + tId + '"]');
这段代码似乎没有意义，它会工作，而且它不适合我。（注意： elem等同于模板或temp，因为他们似乎在代码示例中使用了它。）

find方法他们如何使用它？它们似乎是按属性名称和值查找元素。我四处寻找[]语法，但无法找到任何参考。 Angular将查找限制为标记名称。他们没有提到jQuery，但jQuery似乎也没有这个功能。

Answer 1

您需要在angular之前在索引中导入jquery。之后，find（）应该可以工作。

如何在指令模板中找到具有特定属性和属性值的元素？ - ng-conf 2015示例

1 个答案: