How to Create recursive Angular.js Templates without isolating scope?

Question

I have a recursive data structure I am trying to represent in Angular.js. a simplified demo is available here:

http://plnkr.co/edit/vsUHLYMfI4okbiVlCK7O?p=preview

In the Preview, I have the following HTML for a recursive object:

<ul>
  <li ng-repeat="person in people">
    <span ng-click="updateClicks(person)">{{person.name}}</span>
    <ul>
      <li ng-repeat="kid in person.kids">
        <span ng-click="updateClicks(kid)">{{kid.name}}</span>
      </li>
    </ul>
  </li>
</ul>

In my application, the view is much more complex. I would like to have a way to generate the template html for each person in a recursive fashion. I tried doing this with a directive, however I ran into issues with infinite loops when I did not isolate the scope. And when I did isolate the scope, I was no longer able to call functions that are tied to the controller (in this example, the updateClicks function, however in my application there are several).

How can I generate html for these objects recursively, and still be able to call functions belonging to a controller?

Answer 1

I think the best way to do this is with an $emit.

Let's say your recursive directive looks like this:

directive('person', function($compile){
  return{
  restrict: 'A',
  link: function(scope, element, attributes){
    //recursive bit, if we've got kids, compile & append them on
    if(scope.person.kids && angular.isArray(scope.person.kids)) {
     $compile('<ul><li ng-repeat="kid in person.kids" person="kid"></li></ul>')(scope, function(cloned, scope){
       element.find('li').append(cloned); 
     });
    }
  },
  scope:{
    person:'='
  },
  template: '<li><span ng-click="$emit(\'clicked\', person)">{{person.name}}</span></li>'
  }
});

notice the ng-click="$emit(clicked, person)" code, don't be distracted the \\, that's just there to escape. $scope.$emit will send an event all the way up your scope chain, so that in your controller, your clicked function stays mostly unchanged, but now instead of being triggered by ng-click, you're listening for the event.

$scope.$on('clicked', function(event, person){
  person.clicks++;
  alert(person.name + ' has ' + person.clicks + ' clicks!');
});

cool thing is that the event object even has the isolated scopes from your recursed directives.

Here's the fully working plnkr: http://plnkr.co/edit/3z8OXOeB5FhWp9XAW58G?p=preview even went down to tertiary level to make sure recursion was working.

Answer 2

Recursive tree with angular directive without scope isolation, forces you to simulate isolation by using different scope properties per depth level.

I didn't find any so I wrote my own.

Let's say your HTML is :

<body ng-app="App" ng-controller="AppCtrl">
  <div test="tree.children" test-label="tree.label">{{b}}</div>
</body>

Then you have a main module and a controller adding a tree to the scope :

var App = angular.module('App', []);

App.controller('AppCtrl', function($scope, $timeout) {
  // prodive a simple tree
  $scope.tree = {
    label: 'A',
    children: [
      {
        label: 'a',
        children: [
          { label: '1' },
          { label: '2' }
          ]
      },
      {
        label: 'b',
        children: [
          { label: '1' },
          { label: '2' }
          ]
      }
      ]
  };

  // test that pushing a child in the tree is ok
  $timeout(function() {
    $scope.tree.children[1].children.push({label: 'c'});
  },2000);
  $timeout(function() {
  // test that changing a label is ok
    $scope.tree.children[1].label = 'newLabel';
  },4000);

});

Finally consider the following implementation of the directive test :

App.directive('test', function($compile) {
  // use an int to suffix scope properties 
  // so that inheritance does not cause infinite loops anymore
  var inc = 0;
  return {
    restrict: 'A',
    compile: function(element, attr) {
      // prepare property names
      var prop = 'test'+(++inc),
          childrenProp = 'children_'+prop,
          labelProp = 'label'+prop,
          childProp = 'child_'+prop;

      return function(scope, element, attr) {
        // create a child scope
        var childScope = scope.$new();
        function observeParams() {
          // eval attributes in current scope
          // and generate html depending on the type
          var iTest = scope.$eval(attr.test),
              iLabel = scope.$eval(attr.testLabel),
              html = typeof iTest === 'object' ?
              '<div>{{'+labelProp+'}}<ul><li ng-repeat="'+childProp+' in '+childrenProp+'"><div test="'+childProp+'.children" test-label="'+childProp+'.label">{{'+childProp+'}}</div></li></ul></div>'
            : '<div>{{'+labelProp+'}}</div>';

          // set scope values and references
          childScope[childrenProp]= iTest;
          childScope[labelProp]= iLabel;

          // fill html
          element.html(html);

          // compile the new content againts child scope
          $compile(element.contents())(childScope);
        }

        // set watchers
        scope.$watch(attr.test, observeParams);
        scope.$watch(attr.testLabel, observeParams);
      };
    }
  };
});

All the explanations are in the comments.

You may have a look at the JSBin .

My implementation can of course be improved.

How to Create recursive Angular.js Templates without isolating scope?

Question

2 answers

solution1
3 2013-08-07 03:28:00

solution2
2 2013-06-13 13:25:13

How to Create recursive Angular.js Templates without isolating scope?

Question

2 answers

solution1 3 2013-08-07 03:28:00

solution2 2 2013-06-13 13:25:13

solution1
3 2013-08-07 03:28:00

solution2
2 2013-06-13 13:25:13