angularjs 父指令中的函数未被嵌入 html 调用

Question

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

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

谁能告诉我一些解决方案

我的代码如下

<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让我头疼，我认为这会很有挑战性，但解决方案证明很简单：

从您的 link 函数中删除 DOM 操作并在模板中进行嵌入！

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

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

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

最佳解决方案是将 children 包裹在自己的 <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 指令）获得 outer 范围，即 MainCtrl 的范围。一个解决方案是将 getValue() 移动到 MainCtrl.

更好的解决方案是将回调传递给 grandparent 的后代，例如作为 scope: { assignValue: '&' }。但是这个解决方案不能为当前形式的代码实现，因为 grandparent 不直接包含它的 children，所以它不能向它们传递参数。

最终解决方案-从评论中复制：将getValue移动到grandParent的controller，让parent和children require grandparent 并调用该函数。参见 http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=preview

angularjs 父指令中的函数未被嵌入 html 调用

angularjs function in parent directive not getting called from transcluded html

javascript

angularjs

angularjs-directive

angularjs-ng-transclude