从grandchild指令调用控制器中的父函数会导致未定义的参数

时间:2015-10-28 05:23:48

标签: javascript angularjs

我对Angular比较新,很可能接近这个错误。我正在显示一个菜单列表,并将此功能打包成两个指令:

  • MenuItemRepeater 获取项目列表并显示它们

  • AddMenuItem 允许在列表中添加新项目,从MenuItemRepeater调用

我在这些指令中有隔离范围,并且一旦用户输入并提交新菜单项的文本,我就在父控制器中调用一个函数。父函数被正确调用,但我传递的参数是未定义的。这是我的HTML:

{
   "Envelope": {
      "Body": {
         "processResponse": {
            "ERROR_CODE": "S",
            "ERROR_MSG": "Login Successful",
            "GROUPS_ID": "76721",
            "PERSON_ID": "309236",
            "PERSON_LOGIN": "Y",
            "PERSON_NAME": "Welcome! ashanka",
            "PERSON_ROLE": "Y",
            "PERSON_UID": "1014336",
            "client": "http:\/\/xmlns.oracle.com\/InternetMobile\/AbsManagement\/BPELProcessUserLogin",
            "xmlns": "http:\/\/xmlns.oracle.com\/InternetMobile\/AbsManagement\/BPELProcessUserLogin"
         }
      },
      "Header": {
         "FaultTo": {
            "Address": "http:\/\/www.w3.org\/2005\/08\/addressing\/anonymous"
         },
         "MessageID": "urn:C9C4DB207D5211E5BF9B25E60F40847D",
         "ReplyTo": {
            "Address": "http:\/\/www.w3.org\/2005\/08\/addressing\/anonymous"
         }
      },
      "env": "http:\/\/schemas.xmlsoap.org\/soap\/envelope\/",
      "wsa": "http:\/\/www.w3.org\/2005\/08\/addressing"
   },
   "errors": [
   ],
   "info": [
   ],
   "isSuccessful": true,
   "responseHeaders": {
      "Content-Length": "1017",
      "Content-Type": "text\/xml; charset=utf-8",
      "Date": "Wed, 28 Oct 2015 09:03:42 GMT",
      "SOAPAction": "\"\"",
      "X-ORACLE-DMS-ECID": "9e10a9dcf92c80fa:-8e91c30:150a34b187a:-8000-0000000000053e79",
      "X-Powered-By": "Servlet\/2.5 JSP\/2.1"
   },
   "responseTime": 106,
   "statusCode": 200,
   "statusReason": "OK",
   "totalTime": 122,
   "warnings": [
   ]
}

和我的控制器/指令逻辑:

<div ng-controller="myController">
  <menu-item-repeater list="list" courseText="nameOfCourse" add-item-func="addMenuItemFun()"></menu-item-repeater>
</div>

这是一个显示问题的Plnkr。我是以错误的方式接近这个吗?首选模式是什么?

http://plnkr.co/edit/fksSl5yeEFLtMsf4poKv

1 个答案:

答案 0 :(得分:1)

这里有几个问题,但主要问题是&你绑定到表达式,这意味着你最终会调用控制器&#39; s函数按原样,即没有参数的addMenuItemFun() - 因此你永远不会得到一个项目。

您需要将其写为addMenuItemFun(item)(或者您想要为参数命名的任何内容)。

这将返回一个您可以在指令中评估的表达式。 Angular允许您通过表达式中的名称访问参数。

add-item="addItemFunc({nameOfItemArgument: item})"

您有时也没有正确传递courseText。最好不要在模板本身中弄乱大写。

工作版本:http://plnkr.co/edit/a9T7pbmD2nW0QqBXxxb2?p=preview