从孙子指令在控制器中调用父函数会导致参数未定义

Question

我是Angular的新手，很可能会错误地使用它。 我正在显示菜单列表，并将此功能打包为两个指令：

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

• AddMenuItem允许将新项目添加到列表中，从MenuItemRepeater调用

我在这些指令中隔离了范围，并在用户输入并提交新菜单项的文本后在父控制器中调用函数。 父函数被正确调用，但是我传递的参数是未定义的。 这是我的HTML：

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

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

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){
    $scope.list = [];
    var item1 = {name:'Item 1',course:'test1'};
    var item2 = {name:'Item 2',course:'test2'};
    $scope.list.push(item1);
    $scope.list.push(item2);
    $scope.addMenuItemFun = function (item) {
       try {
         var itemToAdd = {
            name: item.name,
            course: item.course
         };
         $scope.list.push(itemToAdd);
       }
       catch(err) {
          alert(err);
       }
   };
});

myApp.directive('menuItemRepeater', function () {
    return {
        restrict: 'E',        
        template: '<div ng-repeat="item in list">{{item.name}}</div><add-menu-item courseText="courseText" add-item="addItemFunc()"></add-menu-item>',
        scope: {
            courseText: '@coursetext',
            addItemFunc: '&',
        }
    }
});
myApp.directive('addMenuItem', function(){
    return {
        retstrict: 'E',
        template: '<div class="form-group"><label for="name">Name of new item: </label><input ng-model="itemName" type="text" class="form-control" id="itemName" ><input ng-model="courseText" type="hidden" value="{{courseText}}" />            </div>                                 <button class="btn btn-default" ng-click="addNewItem1()">Submit</button>',        
        scope: {            
            courseText: '@couresetext',
            addItem: '&',
            itemName: '='
        },
        link: function (scope, $element) {                        
            scope.addNewItem1 = function () {                
                var newItem = {
                    name: scope.name,                                                                                
                    course: scope.courseText
                };
                scope.addItem({ item: newItem });
            };
        }
    }
});

这是显示问题的Plnkr。 我是否以错误的方式处理此问题？ 首选的模式是什么？

http://plnkr.co/edit/fksSl5yeEFLtMsf4poKv

Answer 1

这里有几个问题，但主要的问题是&绑定到一个表达式 ，这意味着您最终将按原样调用控制器的函数，即没有参数的addMenuItemFun() ，因此您永远不会得到任何东西。

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

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

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

您有时也无法正确传递courseText 。 最好不要弄乱模板本身的大小写。

工作版本： http ： //plnkr.co/edit/a9T7pbmD2nW0QqBXxxb2？p = preview