Question

我的代码的结构是我有一个父“组件”，里面有一个列表组件。我想单击列表组件内的项目上的编辑，并将该项目传递回父组件中的函数。 editMember函数中的参数将作为null

传回

let ParentDirective = () => {
    "use strict";
    return {
        restrict: 'A',
        scope: {
            visible: '<',
            members: '='
        },
        template: (() => {
            return `
                <div>
                    <div list-directive
                         members="members"
                         edit="methods.editMember(member)">
                    </div>
                </div>
            `;
        })(),
        controller: ($scope) => {
            $scope.methods = {
                editMember: (member) => {
                    console.log(member) //member is null
                }
            };
        }
    }
};

export default {directive: ParentDirective, name: 'parent'};



let ListDirective = () => {
    "use strict";
    return {
        restrict: 'A',
        scope: {
            members: '<',
            editMember: '&edit'
        },
        template: (() => {
            return `
                <div>

                    <div ng-repeat="member in members">
                        {{member.name}}
                                <button type="button"
                                        ng-click="editMember(member)">
                                    <i class="ion-edit"></i>
                                </button>
                        </div>
                    </div>

                </div>
            `;
        })(),
        controller: ($scope) => {
           }
    }
};

export default {directive: ListDirective, name: 'list'};

Answer 1

您最好的选择是使用EventEmitter在您使用Angular 2的情况下在子组件和父组件之间进行交互。

请查看here了解有关如何操作的更多信息。

如果您使用的是Angular 1，那么您只需将ng-click="editMember(member)"更改为ng-click="editMember({member: member})"，因为您需要将其作为哈希传递：

<button type="button"
    ng-click="editMember({member: member})">
    <i class="ion-edit"></i>
</button>

请注意，无论您在父母中命名参数，都需要调用它，例如如果你这样定义你的父母：

edit="methods.editMember(temp)"

然后你应该传递它：

<button type="button"
    ng-click="editMember({temp: member})">
    <i class="ion-edit"></i>
</button>

将数据从指令传递回控制器

1 个答案: