Angular.js:在嵌套的 transclude 中包装元素 [英] Angular.js: Wrapping elements in a nested transclude

问题描述

这似乎是一件很简单的事情，但我就是不知道该怎么做.

This seems like such a simple thing, but I am just not able to wrap my head around how to do it.

这是我想要的:

<my-buttons>
  <my-button ng-click="doOneThing()">abc</my-button>
  <my-button ng-click="doAnotherThing()">def</my-button>
</my-buttons>

变成这样:

<ul class="u">
  <li class="l"><button ng-click="doOneThing()">abc</button></li>
  <li class="l"><button ng-click="doAnotherThing()">def</button></li>
</ul>

注意 ng-click 如何在 button 上，在包装的 li 内.但是，正常的嵌入会将 ng-click 放在 li 上.

Notice how the ng-click is on the button, inside a wrapping li. However, the normal transclusion will place the ng-click on the li.

我最好的尝试是在这个小提琴上:http://jsfiddle.net/WTv7k/1/ 在那里我用一个类替换了 ng-click，所以很容易看出它什么时候起作用，什么时候不起作用.

My best try is on this fiddle: http://jsfiddle.net/WTv7k/1/ There I have replaced the ng-click with a class, so it is easy to see when it works and not.

关于如何完成这项工作的任何想法?如果真的很简单，也许可以扩展首页上的选项卡/窗格示例以在窗格周围包含一个包装器，同时仍保留属性.

Any ideas of how to get this done? If it is really easy, maybe the tabs/pane example on the frontpage could be expanded to include a wrapper around the panes, while still keeping the attributes.

推荐答案

使用 replace:true 替换过程会从旧元素() 到新的(模板中的根元素，

).Transclude 将旧元素的内容移动到指定的 (ng-transclude) 元素.我不确定是否有一种简单的方法可以更改模板中将接收迁移属性的元素.

With replace:true the replacement process migrates all of the attributes / classes from the old element (<my-button ...>) to the new one (the root element in the template, <li ...> ). Transclude moves the content of the old element to the specified (ng-transclude) element. I'm not sure if there's a simple way to change which element in the template that will receive the migrated attributes.

为了实现您想要的效果，您可能可以在 my-button 指令中的自定义编译函数中进行一些 dom 操作.但是，我认为在 my-button 指令中创建一个新的隔离范围是一个更好的主意:

To achieve what you want you could probably do some dom manipulation in a custom compile function in the my-button directive. However, I think it'd be a better idea to create a new isolate scope in the my-button directive:

<my-buttons>
  <my-button click-fn="doOneThing()">abc</my-button>
  <my-button click-fn="doAnotherThing()">def</my-button>
</my-buttons>

(注意我已将 ng-click 更改为 click-fn)

(notice I've changed ng-click to click-fn)

module.directive('myButtons', function () {
  return {
    restrict:'E',
    transclude:true,
    replace:true,
    template:'<ul class="u" ng-transclude></ul>'
  }
});

module.directive('myButton', function () {
  return {
    scope:{clickFn:'&'},
    restrict:'E',
    transclude:true,
    replace:true,
    template:'<li class="l"><button ng-click="clickFn()" ng-transclude></button></li>'
  }
});

我还制作了一个你的小提琴的工作版本.

要了解隔离范围的工作原理 (scope:{clickFn:'&'})，我建议您阅读 关于指令的角度指南.

To understand how the isolate scope works (scope:{clickFn:'&'}) I recommend you read the angular guide on directives.

这篇关于Angular.js:在嵌套的 transclude 中包装元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！