angular-recursion icon indicating copy to clipboard operation
angular-recursion copied to clipboard

Two way binding not completed

Open pixelpax opened this issue 8 years ago • 0 comments

What I'd like to do is 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>

pixelpax avatar May 22 '16 18:05 pixelpax