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-点击是在按钮，包裹里面李。但是，正常的transclusion将放置 NG-点击在里。

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-点击，所以很容易地看到，当它的工作原理，而不是

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.

如何得到这个工作任何想法？如果它是很容易，在FrontPage也许标签/窗格例子可以扩展到包括周围的窗格的包装，同时仍保持属性。

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.

推荐答案

使用的更换：真正的更换过程中迁移所有属性/从旧的元素类（的＆LT;我 - 按钮...> 的）到新的（模板的根元素的＆LT;李...> 的）。 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.

要实现你想要的，你也许可以做一些DOM操作在我的按钮指令的自定义函数编译什么。不过，我认为这会是一个更好的主意来创建在我的按钮指令一个新的分离范围：

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-点击点击-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>'
  }
});

我还做你的提琴的工作版本。

I've also made a working version of your fiddle.

要了解分离范围是如何工作的（范围：{clickFn：'和;'} 的），我建议你读的上的指示角指南。

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

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