javascript - 从孙子指令调用 Controller 中的父函数会导致参数未定义

Question

我对 Angular 还比较陌生，并且很可能错误地处理了这个问题。我正在显示一个菜单列表，并将此功能打包到两个指令中:

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

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

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

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

和我的 Controller /指令逻辑:

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

这里出现了几个问题，但主要的一个是，使用 & 您绑定(bind)到一个表达式，这意味着您最终将调用 Controller 的按原样运行，即 addMenuItemFun() 不带参数 - 因此你永远不会得到一个项目。

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

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

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

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

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