possibility to apply different template without forking

[masrawi]

it would be nice to be able to define a different template as an attribute

<abn-tree template="myTemplate.html" .../>

[lukas-shawford]

I had a similar need. In case anyone else is looking to do the same, here's how I accomplished it - note, it does require having to tweak the directive code a bit, and it requires dumping out the default template HTML into its own file.

Rather than inlining the template, as the directive is currently doing:

module.directive('abnTree', [
    '$timeout', function($timeout) {
      return {
        restrict: 'E',
        template: "<ul class=\"nav nav-list ............. <lots of code here> ....................</ul>",

I extracted out the default template into its own file, placing it at /partials/abn_tree_template.html. Then I replaced that last line in the directive code with:

templateUrl: function(element, attr) { return attr.templateUrl ? attr.templateUrl : '/partials/abn_tree_template.html' },

So, rather than setting the template property, we're not setting templateUrl. If it's provided as an attribute, then we use it - otherwise, we just use the default template whose path must be hardcoded.

This makes it possible to swap out the template when using the directive like so:

<abn-tree tree-data="my_tree" template-url="/partials/my_custom_template.html"></abn-tree>

So, it's not too hard to accomplish, and I wish it worked like this out of the box! But then it does open up some other issues... for instance, not everyone is going to be happy with the path /partials/abn_tree_template.html, and I'm not sure if there's a good way to make that easily configurable.

[magro]

@sergkr Does it make sense that you submit your changes as a pull request?

[lukas-shawford]

@magro Maybe, but it's up to the project maintainer if this is the route we should go or not. If so, I wouldn't mind polishing this up and putting up a pull request. @nickperkinslondon, any thoughts?

I looked through previous issues, and found that a similar feature has been proposed before as part of #2:

you can provide two versions of abn-tree, the normal one where the user must adjust the templateUrl and can tweak the rendering of the directive ; and a second one where no setup is required to be used if the default template is satisfying (and most of the user want such a solution)

That pull request was not merged, but from what I can tell, it's because a different approach (inlining the template) was favored for the core issue (the fact that you had to specify the template URL in order to use the directive). Or maybe it's the fact that it would have required maintaining two separate versions of the directive (if my understanding is correct - I haven't looked through that pull request very closely).

So, inlining the template was done to make it easier to use out of the box, but this, of course, came at the expense of flexibility. In the tradeoff between ease of use and flexibility, I'd personally argue that flexibility is more important for something as generic as a tree control. No matter how hard you try, you're never going to please everyone because people are using this for all sorts of things. So I'd say the goal of this directive ought to be to provide a solid base, but make it extensible, even if it means requiring more footwork to make it usable.

Something that can be done to avoid having to specify the template URL everywhere that you want to use this directive is to make the default template path a constant that can be configured inside the module's app.config block (guide). If the templateUrl is not passed in, then the directive would use the default (based on the constant), but otherwise the passed in templateUrl would override the default. This would bring back the requirement that the default HTML template is downloaded and included as part of the project if you wanted to use the directive, and additionally users would have to configure the directive inside their app's config block (or else always specify templateUrl manually).

Anyways, @nickperkinslondon, let me know what your thoughts are on this, and whether this is something you want to look at yourself, or if you would be willing to accept a pull request for this, or if this isn't quite in line with the goal of this project, etc. Like I said, I wouldn't mind putting up the work.

[masrawi]

any update on this?

[allisonshaw]

The option to use a custom templateUrl is truly useful. Any update on including this functionality, @nickperkinslondon ?

[hmillet]

angular-bootstrap-nav-tree is a really good directive... but having no way to modify the template restrict its usage. It seems very important to me to provide such an option ! :+1:

[symrad]

without change anything, you can do something like this

$provide.decorator('abnTreeDirective', function ($delegate) {
        var directive = $delegate[0];
        delete directive.template;

        directive.templateUrl = function(scope, attrs){
            var templateUrl;
            switch(attrs.abnTreeTemplateType){
                case 'menu':
                    templateUrl = pathTpl + 'common/directive/abn-tree-menu.html';
                break;
                default:
                    templateUrl = pathTpl + 'common/directive/abn-tree-default.html';
                break;
            }
            return templateUrl;
        };
        return $delegate;
    });

<abn-tree abn-tree-template-type="menu" tree-data="navMenu"></abn-tree>