Decide when to 'templateUrl' of AngularJS directive in the link function

Question

Is it possible to decide whether to use templateUrl parameter in the link function of AngularJS directive?

Suppose I have the following directive:

app.directive('sitesAndImprovements', function() {
    return {
        restrict: 'E',
        replace:true,
        templateUrl: '<path-to-file>/site-and-improvments.html',
        link: function (scope, elem, attrs) {
            scope.testClick = function() {
                var myScope = scope;
                //debugger;
            }
            scope.constructionCompleteClick = function () {
                if (scope.construction_complete == 'Yes') {
                    scope.hold_back = '';
                    scope.percent_complete = 100;
                } else
                if (scope.construction_complete == 'No') {
                    scope.hold_back = '1';
                    if (scope.percent_complete == 100) {
                        scope.percent_complete = '';
                    }
                }
            }
            scope.calcTotal = function () {
                var total;
                total = (scope.main || 0) + (scope.second || 0) + (scope.third || 0) + (scope.fourth || 0);
                scope.total = total || null;
            }
        }
    } 
})

I want to control whether to use or not to use the templateUrl and also the replace parameters in the link() function.

This is because I already implemented this directive in about 10+ places without using templateUrl and now I want to start using this feature, but I don't want to make changes to existing and working code.

Is that possible and how?

Tarek

score 0 · Answer 1 · answered Jul 27 '17 at 22:02

I don't think you can do that in the link, but I believe you can turn templateUrl into a function that can return different values for the directive.

Try doing something like this for your templateUrl:

templateUrl: function() {
    if (someCondition) {
        return '<path-to-file>/site-and-improvments.html';
    } else {
        return null;
    }
},

score 0 · Answer 2 · answered Jul 27 '17 at 22:06

app.directive('sitesAndImprovements', function() {
    return {
        restrict: 'E',
        replace:function(){
            if (aCondition){
                return true;
            } else {
                return false;
            }
        },
        templateUrl: function(){
            if (aCondition){
                return '<path-to-file>/site-and-improvments.html';
            } else {
                return undefined;
            }
        },
        link: function (scope, elem, attrs) {
            scope.testClick = function() {
                var myScope = scope;
                //debugger;
            }
            scope.constructionCompleteClick = function () {
                if (scope.construction_complete == 'Yes') {
                    scope.hold_back = '';
                    scope.percent_complete = 100;
                } else
                if (scope.construction_complete == 'No') {
                    scope.hold_back = '1';
                    if (scope.percent_complete == 100) {
                        scope.percent_complete = '';
                    }
                }
            }
            scope.calcTotal = function () {
                var total;
                total = (scope.main || 0) + (scope.second || 0) + (scope.third || 0) + (scope.fourth || 0);
                scope.total = total || null;
            }
        }
    } 
})

Explanation : As stated in the source code, the template will be compiled only if templateUrl is given :

...
    if (directive.templateUrl) {
              hasTemplate = true;
              assertNoDuplicate('template', templateDirective, directive, $compileNode);
              templateDirective = directive;

              if (directive.replace) {
                replaceDirective = directive;
              }

              // eslint-disable-next-line no-func-assign
              nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode,
...

Please, note that aCondition could be an attribute passed to the directive to enable/disable the templateUrl and the replace. Also, keep in mind that the replace is deprecated.

Decide when to 'templateUrl' of AngularJS directive in the link function

2 Answers2