Angular.js:在嵌套转换中包装元素

Question

这看起来很简单,但我无法绕过如何做到这一点.

这就是我想要的:

<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.

我最好的尝试就是这个小提琴:http://jsfiddle.net/WTv7k/1/我用类替换了ng-click,因此很容易看出它何时起作用而不是.

有关如何完成这项工作的任何想法？如果它真的很简单,也许首页上的标签/窗格示例可以扩展为包含窗格周围的包装,同时仍然保留属性.

Answer 1

使用replace:true,替换过程将所有属性/类从旧元素(<my-button ...>)迁移到新元素(模板中的根元素<li ...>).Transclude将旧元素的内容移动到指定的(ng-transclude)元素.我不确定是否有一种简单的方法可以更改模板中哪个元素将接收迁移的属性.

为了达到你想要的效果,你可以在my-button指令的自定义编译函数中做一些dom操作.但是,我认为在my-button指令中创建一个新的隔离范围是个更好的主意:

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

(注意我已经改变了ng-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>'
  }
});

我也做了一个小提琴的工作版本.

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