Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two way binding not completed #17

Open
pixelpax opened this issue May 22, 2016 · 0 comments
Open

Two way binding not completed #17

pixelpax opened this issue May 22, 2016 · 0 comments

Comments

@pixelpax
Copy link

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant