递归 AngularJS 指令
Recursive AngularJS directive
目前我正在使用 AngularJS 开发一个项目,我需要创建一个能够显示(和更改)"recursive structure" 的指令 - 类似于家庭的东西。
控制器中定义的结构如下所示:
$scope.members = [
{ firstName: 'Andrei', lastName: 'Croitoriu', age: 32 },
{ firstName: 'John', lastName: 'Doe', age: 25, members: [
{
firstName: 'Jane', lastName: 'Doe', age: 24
}
]}
];
我已经设法实现了显示结构的指令,但现在我正在努力实现 "Add Member" 功能。基本上,我希望每个成员旁边都有一个按钮,并且能够向节点添加新成员。我想在控制器中定义一个方法——到目前为止我的所有尝试都失败了,所以在附加的 plnkr 代码中我删除了所有尝试(只留下一个简单的 addMember 方法,它只是将一个新成员添加到顶级集合中。
任何人都可以就如何将 addMember 方法传递给指令并实现我期望的行为提出任何想法吗?
我的代码可以在这里找到:http://plnkr.co/edit/hRzQiW?p=info
提前致谢!
安德烈
fast tuning是将addMember
放在familyMember
指令中,由于指令作用域是隔离的,controller作用域下的函数是不可访问的。
在这里查看 plunker:http://plnkr.co/edit/h6vZu7?p=preview
目前我正在使用 AngularJS 开发一个项目,我需要创建一个能够显示(和更改)"recursive structure" 的指令 - 类似于家庭的东西。 控制器中定义的结构如下所示:
$scope.members = [
{ firstName: 'Andrei', lastName: 'Croitoriu', age: 32 },
{ firstName: 'John', lastName: 'Doe', age: 25, members: [
{
firstName: 'Jane', lastName: 'Doe', age: 24
}
]}
];
我已经设法实现了显示结构的指令,但现在我正在努力实现 "Add Member" 功能。基本上,我希望每个成员旁边都有一个按钮,并且能够向节点添加新成员。我想在控制器中定义一个方法——到目前为止我的所有尝试都失败了,所以在附加的 plnkr 代码中我删除了所有尝试(只留下一个简单的 addMember 方法,它只是将一个新成员添加到顶级集合中。
任何人都可以就如何将 addMember 方法传递给指令并实现我期望的行为提出任何想法吗?
我的代码可以在这里找到:http://plnkr.co/edit/hRzQiW?p=info
提前致谢!
安德烈
fast tuning是将addMember
放在familyMember
指令中,由于指令作用域是隔离的,controller作用域下的函数是不可访问的。
在这里查看 plunker:http://plnkr.co/edit/h6vZu7?p=preview