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 ，替换过程会将旧元素（＆lt; my-button ...＆gt; ）中的所有属性/类迁移到新元素一个（模板中的根元素，＆lt; li ...＆gt; ）。 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更改为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>'
  }
});

我还制作了working version of your fiddle。

要了解隔离范围的工作原理（范围：{clickFn：'＆amp;'} ），我建议您阅读angular guide on directives。

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

1 个答案: