在父母指导angularjs功能没有得到来自transcluded HTML叫 [英] angularjs function in parent directive not getting called from transcluded html

问题描述

我已经用angualrjs指令像功能的下拉列表中，该指令是正确的方式我预期工作有些但不是。结果
以下是我现在所面临的问题。

• 的下拉列表中调整是静态正确的，但不能用于动态


• 我不能够选择任何选项列表，因为的getValue 我在父指令定义是没有从trancluded指令
调用函数

谁能告诉我，这一些解决方案

我的code为如下

给出

PLUNKER

 ＆LT; D​​IV NG控制器=MainCtrl＆GT;  静态的
  ＆LT;授予父母NG模型=grand1＆GT;
    ＆LT;父标签=Parent1VALUE =12＆GT;
      ＆LT;儿童价值=56的标签=Child1＆GT; Child1＆LT; /儿童＆GT;
      ＆LT;儿童价值=57的标签=CHILD2＆GT;＆CHILD2 LT; /儿童＆GT;
    ＆LT; /母体GT;
    ＆LT;父标签=Parent1VALUE =13＆GT;
      ＆LT;儿童价值=58标签=Child3＆GT; Child3＆LT; /儿童＆GT;
      ＆LT;儿童价值=59标签=Child4＆GT; Child4＆LT; /儿童＆GT;
    ＆LT; /母体GT;
  ＆LT; /赠款父＆GT;
  动态
  ＆LT;授予父母NG模型=grand2＆GT;
    ＆LT;父母NG重复=母公司数据标签={{parent.parentName}}VALUE ={{parent.parentId}}＆GT;
      ＆LT;儿童NG重复=孩子parent.childrens标签={{child.name}}VALUE ={{child.id}}＆GT; {{child.name}}＆LT; /儿童＆GT;
    ＆LT; /母体GT;
  ＆LT; /赠款父＆GT;＆LT; / DIV＆GT;
 

解决方案

Transclusion和 NG-重复已引起了我的头痛，我认为这将是具有挑战性的，但解决办法证明很简单：

从你的链接功能删除DOM操作，做模板的transclusion！

即。 ＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆GT; 在母公司的模板键，删除此行： elm.find（'DIV'）。replaceWith（transclude（））。

叉形普拉克： http://plnkr.co/edit/UGp6D29yxnu0uJwD1BM2?p= preVIEW

---

现在标记出来有点不同，包装＆LT; D​​IV＆GT; 仍然存在。虽然似乎没有视觉差，这可能不是你想要的。我不认为这是一个明智的方式来解决这个问题，所以我建议改变布局了一下：你为什么不把孩子的 的内部父＆LT;李＆GT; ，例如：如：

 ＆LT;立GT;
    ＆所述b取代;＆下; A HREF ='＃'纳克点击='的getValue（optGroupLabel，optGroupValue）'＆GT; {{optGroupLabel}}＆下;跨度类='值'＆GT; {{optGroupValue}}＆下; /跨度＆GT ;＆所述; / A＆GT;＆下/ b个
    ＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆GT;＆LT;！ - 股利现在是李里 - ＆GT;
＆LT; /李＆GT;
 

这工作在plunker，但标记仍然是无效的（＆LT;李＆GT; 在＆LT; D​​IV＆GT; ）。

最好的解决办法是包装孩子们在自己的＆LT; UL＆GT; ，即：

 ＆LT;立GT;
    ＆所述b取代;＆下; A HREF ='＃'纳克点击='的getValue（optGroupLabel，optGroupValue）'＆GT; {{optGroupLabel}}＆下;跨度类='值'＆GT; {{optGroupValue}}＆下; /跨度＆GT ;＆所述; / A＆GT;＆下/ b个
    ＆LT; UL NG-transclude＆GT;＆LT; / UL＆GT;＆LT;！ - 在div被替换为UL  - ＆GT;
＆LT; /李＆GT;
 

这确实的不的在普拉克的工作，因为它是，但应与少许CSS调整工作。

---

关于的getValue 您已经得到了错误的孤立如何范围和transclusion工作。在祖父母指令定义在其隔离范围的getValue 方法。该transcluded的东西（在父和孩子指令）获得的外的范围，即的 MainCtrl 范围。一个解决方案是将的getValue（）到 MainCtrl 。

有一个更好的解决方案将是一个回调传递给祖父母的后代，例如为范围：{assignValue：'和;' } 。但这种方法不能为目前形式的code来实现，因为祖父不直接包括它的孩子，所以它不能将参数传递给他们。

最终的解决方案 - 从注释复制：移动的getValue 到控制器的祖父母，有家长和孩子们所需要的祖父母和呼叫该功能。请参见 http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=$p$pview

I have created a dropdown list like feature using angualrjs directive, The directive is working somewhat but not in correct way I expected.
Following are the issues which I am facing.

• The drop-down list alignment is correct for static but not for dynamic
• I am not able to select any of the option list since getValue function which I have defined in the parent directive is not been invoked from the trancluded directive

Can anyone please tell me some solution for this

My code is as given below

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> 

解决方案

Transclusion and ng-repeat have caused me headaches, and I thought it would be challenging, but the solution proves quite simple:

Remove the DOM manipulation from your link function and do the transclusion in the template!

I.e. <div ng-transclude></div> in the template of the parent and remove this line: elm.find('div').replaceWith(transclude()).

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

---

Now the markup comes out a bit different, the wrapper <div> still exists. Although there seems to be no visual difference, this may not be what you want. I do not think there is a sane way to get around this, so I would suggest altering the layout a bit: Why don't you place the children inside the parent <li>, e.g. as:

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

This works in the plunker, but the markup is still invalid (<li> within <div>).

The best solution is to wrap the children in their own <ul>, i.e.:

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

This does not work in the plunk as it is, but should work with a little CSS tweaking.

---

Concerning getValue You have gotten wrong how isolated scopes and transclusion work. The grandParent directive defines the getValue method in its isolated scope. The transcluded things (the parent and child directives) get the outer scope, i.e. the scope of the MainCtrl. A solution is to move getValue() to the MainCtrl.

A better solution would be to pass a callback to the descendants of the grandparent, e.g. as scope: { assignValue: '&' }. But this solution cannot be implemented for the code in its current form because the grandparent does not directly include its children, so it cannot pass arguments to them.

The final solution - copied from the comments: move getValue to the controller of grandParent, have the parent and children require the grandparent and call that function. See http://plnkr.co/edit/pS9SspLaoPlqoWMYr8I0?p=preview

这篇关于在父母指导angularjs功能没有得到来自transcluded HTML叫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！