How can I access the parent elements within a recursive directive?

Question

How can I access the parent elements within a recursive directive?

I'm currently implementing a recursive directive called https://github.com/dotJEM/angular-tree to iterate through a model structure like the one below:

  $scope.model = [
      {
          label: 'parent1',
          children: [{
              label: 'child'
          }]
      }, 
      {
          label: 'parent2',
          children: [{
              label: 'child',
              children: [{
                  label: 'innerChild'
              }]
          }]
      }, 
      {
          label: 'parent3'
      }
  ];

This is how the code appears in the template:

<div data-dx-start-with="model">
    <div data-ng-repeat="node in $dxPrior">
        <a class="list-group-item">
            <span class="icon" data-ng-click="toggle(node)"><i class=" icon ion-android-arrow-dropdown"></i>&nbsp;</span>
            <span>{{ node.label}} ({{node.children.length}})</span>
        </a>
        <ul data-ng-show="node.expanded" data-dx-connect="node.children"></ul>
    </div>
</div>

I am looking for a way to access each parent in order to construct a breadcrumb navigation path of the treeview.

Example: parent2 > child > innerChild > ...

While I can retrieve a single node's parent using $parent, my goal is to obtain all parents. Any ideas on achieving this?

To demonstrate my point further, I've put together a plunker demo: http://plnkr.co/edit/DOc9k4jT9iysJLFvvg3u?p=preview

javascript angularjs recursion tree

Answer 1

Answer №1

If you need to create breadcrumbs in your AngularJS application, one way is to write a function that traverses through the parent elements until it reaches the root and builds an array of parents at each step:

$scope.getParentsBreadcrumb = function (thisScope) {
  var parents = [];
  while (thisScope && thisScope.node) {
    parents.unshift(thisScope.node.label);
    thisScope = thisScope.$parent.$parent;
  }
  return parents.join(' > ');
}

After defining this function, you can call it in your template where you want to display the breadcrumbs:

{{getParentsBreadcrumbs(this)}}

Answer 2

If you need to create breadcrumbs in your AngularJS application, one way is to write a function that traverses through the parent elements until it reaches the root and builds an array of parents at each step:

$scope.getParentsBreadcrumb = function (thisScope) {
  var parents = [];
  while (thisScope && thisScope.node) {
    parents.unshift(thisScope.node.label);
    thisScope = thisScope.$parent.$parent;
  }
  return parents.join(' > ');
}

After defining this function, you can call it in your template where you want to display the breadcrumbs:

{{getParentsBreadcrumbs(this)}}

How can I access the parent elements within a recursive directive?

Answer №1

Similar questions

Which symbol or character corresponds to the public "get symbol" method?

Error encountered with Angular version 4: Unexpected token export

What could be causing the React variable to malfunction within my state object?

Map on leaflet with popup next to key

Submitting Form data to MySQL database with Node.js using Express framework

Exploring prototypal inheritance through Angularjs module.service设计(Note: This

Tips for formatting input boxes on the client side

JQuery ajax DELETE request encounters issues during the OPTIONS stage

I am experiencing an issue with AngularJS where it is not retrieving JSON data

Unable to provide any input while utilizing npm prompts

Caution: Angular loaded multiple times due to jQuery dependency being higher

JavaScript code to verify if a checkbox is selected

AngularJS $http.get request that includes a parameter with a null value

AngularJS $injector.unpr Error: Understanding and Resolving Common Dependency Injection

Permanently remove the span tag and any associated text from the HTML document

Setting up Supertest and Express together is leading to a timeout error

Leveraging the Nest JS Validation Pipe in combination with the class-transformer to retrieve kebab-case query parameters

Create an image on a node's backdrop using a library of graph theory/networking techniques

Is there a way to retrieve the properties of another function within the same component?

Modify the information and return it to me