CODEWITHSUNDEEP
javascriptangularjs
Joseph
Joseph

Reputation: 1463

templateUrl function is not using explicit annotation and cannot be invoked in strict mode

I'm attempting to create a custom angular component that dynamically loads a template based on a templateUrl function. I currently get a templateUrl is not using explicit annotation and cannot be invoked in strict mode' error. Normally I understand that this error crops up when an injected service doesn't get properly annotated (https://docs.angularjs.org/error/$injector/strictdi). However, I am missing how this applies to templateUrl.

I'm using Angular 1.5.

Exact error message is - angular.js:13550 Error: [$injector:strictdi] templateUrl is not using explicit annotation and cannot be invoked in strict mode

Component Code snippet:

angular.module('hive.triGrid')
.controller('TriGridCellController', ['$element', '$attrs', function     ($element, $attrs) {
    var $ctrl = this;
}]) 
.component('triGridCell', {
controller: 'TriGridCellController',
templateUrl: function($element, $attrs)
{
    var type = $attrs.cellType;
    if(type.toUpperCase() == "ICON")
    {
        return "components/grid/cellTemplates/iconCell.tpl.html";
    }
    else if(type.toUpperCase() == "CUSTOM")
    {
        return $attrs.cellTemplateUrl;
    }
    else
    {
        return "components/grid/cellTemplates/textCell.tpl.html"; 
    }
},
//template:"<ng-include src='$ctrl.getTemplateUrl(z)'/>",
bindings: {
    cellData:'<',
    cellType: '<', //See triGridRow and triGrid for config JSON format.
    }
});

EDIT: Code after answer was applied:

templateUrl: ['$element', '$attrs', function($element, $attrs)
{
    var type = $attrs.cellType;
    if(type.toUpperCase() == "ICON")
    {
        return "components/grid/cellTemplates/iconCell.tpl.html";
    }
    else if(type.toUpperCase() == "CUSTOM")
    {
        return $attrs.cellTemplateUrl;
    }
    else
    {
        return "components/grid/cellTemplates/textCell.tpl.html"; 
    }
}],

Upvotes: 3

Views: 2303

Answers (1)

Estus Flask
Estus Flask

Reputation: 222855

As said in this answer, $element and $attrs are injected into templateUrl function, not just passed as arguments. This is the difference between element parameter name (in link or compile functions) and $element local dependency in DI-enabled functions that Angular documentation emphasizes.

templateUrl function is invoked by injector in components, so any other services can be injected there as well, and it should be properly annotated.

Upvotes: 5

Related Questions