javascript - 父指令中的angularjs函数没有从嵌入的html中调用

Question

我使用 angualrjs 指令创建了一个类似功能的下拉列表，该指令有些工作，但不是我预期的正确方式。
以下是我面临的问题。

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

谁能告诉我一些解决办法

我的代码如下

PLUNKER

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

Answer 1

包含和 ng-repeat让我很头疼，我认为这会很有挑战性，但事实证明解决方案很简单:

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

即<div ng-transclude></div>在 parent 的模板中并删除此行:elm.find('div').replaceWith(transclude()) .

fork plunk:http://plnkr.co/edit/UGp6D29yxnu0uJwD1BM2?p=preview

---

现在标记有点不同，包装器 <div>仍然存在。虽然看起来没有视觉上的差异，但这可能不是你想要的。我不认为有解决这个问题的明智方法，所以我建议稍微改变一下布局:为什么不将 child 放在 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> 在 <div> 内)。

最好的解决办法是用自己的包裹包裹 child <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在其隔离范围内的方法。嵌入的东西(parent 和 child 指令)获得外部范围，即 MainCtrl 的范围.一个解决方案是移动 getValue()到 MainCtrl .

更好的解决方案是将回调传递给祖 parent 的后代，例如作为scope: { assignValue: '&' } .但是对于当前形式的代码，无法实现此解决方案，因为祖 parent 不直接包含其子代，因此无法向它们传递参数。

最终解决方案 - 从评论中复制:移动 getValue到祖 parent 的 Controller ，让 parent 和 child 需要祖 parent 并调用该函数。参见 http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=preview