Two-way binding on the contents of a recursive directive in Angular?

Question

I'd like to produce a recursively structured document corresponding to a tree structure in my model.

The entire document is contentEditable and the models should react to changes made to an <li> within the view.

I'm using the RecursiveHelper module to avoid endless loops. I'm still trying to figure out post-link, compile, etc.

I'm a little confused which elements are associated with which controllers and scopes.

I know that an iscolate scope is being created at each level of recursion, but I'm not sure how that affects my ability to reference variables within that iscolate scope as models to bind to.

In my main.js:

.directive('bullet',function(RecursionHelper){
    return {
        restrict: "E",
        scope:
            {
                node: '=node',
            },
        controller: function(),
        template:
            `
                <button class="btn btn-default" ng-click="node.toggleExpanded()" ng-show="node.children.length != 0">
                    <span ng-show="!node.expanded" class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span ng-show="node.expanded" class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </button>
                {{node.content}}
                <ul class="list-group-sm" ng-show="node.expanded">
                    <li class="list-group-item" ng-repeat="child in node.children">
                        <bullet node="child" ng-model="child"></bullet>
                    </li>
                </ul>
            `,
      compile: function(element) {
          return RecursionHelper.compile(element, function(scope, elm, attrs, ctrl, transcludeFn){

          });
      }
    }
})

Then within my index.html:

<ul class="list-group-sm" contentEditable="true">
                        <li class="list-group-item" ng-repeat="child in currentBullet.children">
                            <bullet node="child"> </bullet>
                        </li>
                    </ul>

This is a very hard topic. I know angular quite well and I still don't understand completely. What I do know is that if you spend a few hours understanding everything on this page: https://docs.angularjs.org/api/ng/service/$compile you will have a better grasp. — Stevo, May 22 '16 at 18:45
Thank you-- this makes me feel a bit better! I've been reading and reading up on $compile. I think I would have to do this binding within the linking method, I'm just not sure how. — pixelpax, May 22 '16 at 18:54
Have you seen this SO QA? http://stackoverflow.com/questions/11854514/is-it-possible-to-make-a-tree-view-with-angular. There are a number of useful approaches and also shows how the link function returns a compile function. I think a lot of the difficulty in understanding comes from functions that return functions, that return functions etc. It can get a bit 'Inception'.. — Stevo, May 23 '16 at 07:00

Two-way binding on the contents of a recursive directive in Angular?

0 Answers0