1

我使用 angualrjs 指令创建了一个类似功能的下拉列表，该指令在某种程度上起作用，但不是以我预期的正确方式。
以下是我面临的问题。

  • 下拉列表对齐对于静态是正确的，但对于动态不正确
  • 我无法选择任何选项列表，因为getValue我在父指令中定义的函数没有从 trancluded 指令中调用

谁能告诉我一些解决方案

我的代码如下

柱塞

<div ng-controller="MainCtrl">

  Static
  <grant-parent ng-model="grand1">
    <parent label="Parent1" value="12">
      <child value="56" label="Child1">Child1</child>
      <child value="57" label="Child2">Child2</child>
    </parent>
    <parent label="Parent1" value="13">
      <child value="58" label="Child3">Child3</child>
      <child value="59" label="Child4">Child4</child>
    </parent>
  </grant-parent>


  Dynamic
  <grant-parent ng-model="grand2">
    <parent ng-repeat="parent in data" label="{{parent.parentName}}" value="{{parent.parentId}}">
      <child ng-repeat="child in parent.childrens" label="{{child.name}}" value="{{child.id}}">{{child.name}}</child>
    </parent>
  </grant-parent>

</div>
4

1 回答 1

2

嵌入并ng-repeat让我头疼，我认为这将是具有挑战性的，但解决方案证明很简单：

从链接函数中删除 DOM 操作并在模板中进行嵌入！

即<div ng-transclude></div>在模板中parent删除这一行：elm.find('div').replaceWith(transclude()).

分叉的 plunk：http ://plnkr.co/edit/UGp6D29yxnu0uJwD1BM2?p=preview

现在标记出来有点不同，包装器<div>仍然存在。虽然看起来没有视觉差异，但这可能不是你想要的。我不认为有一个理智的方法来解决这个问题，所以我建议稍微改变一下布局：你为什么不把孩子放在parent里面<li>，例如：

<li>
    <b><a href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a></b>
    <div ng-transclude></div><!-- the div is now inside the li -->
</li>

这在 plunker 中有效，但标记仍然无效（<li>within <div>）。

最好的解决方案是将孩子们包裹在他们自己的<ul>中，即：

<li>
    <b><a href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a></b>
    <ul ng-transclude></ul><!-- The div is replaced with ul -->
</li>

这在 plunk 中不起作用，但应该通过一些 CSS 调整来工作。

关于getValue你弄错了孤立的范围和包含的工作原理。该grandParent指令getValue在其隔离范围内定义方法。被嵌入的事物（theparent和child指令）获得了外部范围，即MainCtrl. 一个解决方案是移动getValue()到MainCtrl.

更好的解决方案是将回调传递给祖父母的后代，例如 as scope: { assignValue: '&' }。但是这个解决方案不能针对当前形式的代码实现，因为祖父母不直接包含它的孩子，所以它不能将参数传递给他们。

最终解决方案 - 从评论中复制：移动getValue到 grandParent 的控制器，让父母和孩子需要祖父母并调用该函数。见http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=preview

于 2015-04-03T07:32:29.380 回答