0

I want to generate a tree layout by recussion in the template in my AngularJs application.

The template content is generated by bellow codes.

function genTemplate(moduleName) {
  return `<script type="text/ng-template" id="${moduleName}-zgTree">
    <span class="{{node.fa5Classes}}"></span>&nbsp;{{node.title}}
    <ul class="nav list-group margin-bottom-0" uib-collapse="node.isCollapsed">
      <li class="list-group-item list-group-item-action"
        ng-repeat="node in node.children"
        ng-init="render(node)"
        ng-class="{'list-group-item-success': node.isActive}"
        ng-click="onClick(node)"
        ng-include="'${moduleName}-zgTree'">
      </li>
    </ul>
  </script>`;
}

In the directive definition I use: this.templateUrl = genTemplate(moduleName);

These result:

Error: [$templateRequest:tpload] Failed to load template:

The point is that I need to use ng-include for the recussion, and I need to provide the template-id to ng-include, so I cannot set this.template instead;

Most talks about the dynamic-templateUrl (such as this) focus on generating the URL dynamically/conditionally, but none about the template content; so they do not help much.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
zipper
  • 377
  • 1
  • 5
  • 18
  • Check out [$templateCache.put()](https://docs.angularjs.org/api/ng/service/$templateCache) – Alon Eitan Jul 22 '19 at 16:59
  • 1
    It is sad that you need to use `ng-include` for the recursion of a tree. A skilled programmer would do recursion with [components](https://docs.angularjs.org/guide/component). – georgeawg Jul 22 '19 at 17:01
  • @georgeawg you are right I simply should not use `ng-include` but should use `components` or `directive` instead. – zipper Jul 23 '19 at 08:53

0 Answers0