Recursive AngularJS directive

Question

Currently I am working on a project using AngularJS and I need to create a directive which is able to display (and alter) a "recursive structure" - something similar to a family. The structure defined in the controller looks like this:

$scope.members = [
            { firstName: 'Andrei', lastName: 'Croitoriu', age: 32 },
            { firstName: 'John', lastName: 'Doe', age: 25, members: [
                {
                  firstName: 'Jane', lastName: 'Doe', age: 24
                }
              ]}
           ];

I've managed to implement the directive which display the structure, but now I am struggling to implement a "Add Member" feature. Basically for each member I want to have a button next to it and be able to add a new member to the node. I would like to have a single method defined in the controller - all my attempts so far failed so in the plnkr code attached I've removed all attempts (left just a simple addMember method which just adds a new member to the top level collection.

Can anybody suggest any idea on how to pass the addMember method to the directives and implement the behavior I expect?

My code can be found here: http://plnkr.co/edit/hRzQiW?p=info

Thank you in advance!

Andrei

yes, I want when I click on add member button for a member to add a new member to it's members property. Hope that makes sense... — AndreiC
– AndreiC, Commented Jan 6, 2015 at 15:41
ok my answer is wrong then. i deleted the plunker link, but basic idea is add the addMember function in isolated scope — hjl
– hjl, Commented Jan 6, 2015 at 15:44

hjl · Accepted Answer · 2015-01-06 16:33:34Z

2

fast tuning is to put addMember in familyMember directive, as the directive scope is isolated, the function under controller's scope is not accessible.

see the plunker here: http://plnkr.co/edit/h6vZu7?p=preview

edited Jan 6, 2015 at 16:33

answered Jan 6, 2015 at 15:17

hjl

2,8023 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndreiC Over a year ago

Thank you for the suggestion @elaijuh! Seems to do the job for what I need!

Collectives™ on Stack Overflow

Recursive AngularJS directive

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related