從孫子指令在控制器中調用父函數會導致參數未定義

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