8

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

这是我想要的：

<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，所以很容易看出它什么时候有效，什么时候无效。

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

4

1 回答 1

8

使用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 更改为 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>'
  }
});

我还制作了你的 fiddle 的工作版本。

要了解隔离作用域的工作原理（作用域：{clickFn:'&'}），我建议您阅读 有关指令的角度指南。

于 2013-04-08T18:10:21.090 回答