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";
}
}],
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With