我已经使用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>
包容并ng-repeat引起了我的头痛，我认为这将是一个挑战，但是解决方案证明非常简单：
从链接函数中删除DOM操作，然后在模板中进行包含！
即<div ng-transclude></div>在的模板中，parent然后删除以下行：elm.find('div').replaceWith(transclude())。
分叉的朋克：http ://plnkr.co/edit/UGp6D29yxnu0uJwD1BM2? p= preview
现在标记变得有些不同，包装器<div>仍然存在。尽管似乎没有视觉差异，但这可能不是您想要的。我认为没有一种明智的方法可以解决此问题，因此我建议稍微改变一下布局：为什么不将孩子放置在父母的内部<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>
这可以在插件中使用，但是标记仍然无效（<li>在内<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>
这虽然不能正常工作，但应进行一些CSS调整。
关于getValue您，您错了孤立范围和转写是如何工作的。该grandParent指令getValue在其隔离范围内定义该方法。包含在内的事物（parent和child指令）获得外部范围，即的范围MainCtrl。一个解决办法是移动getValue()的MainCtrl。
更好的解决方案是将回调传递给祖父母的后代，例如as scope: { assignValue: '&' }。但是，由于祖父母没有直接包含其子代，因此无法将参数传递给它们，因此无法以当前形式的代码实现此解决方案。
最终解决方案-从注释中复制：移至grandParentgetValue的控制器，让父级和子级需要祖父母并调用该函数。看到http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=preview
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句