Choose template for Angular Directive based on parent controller scope variable - angularjs

Question

I define $items array in a page controller:
$scope.items = [{id:1,type:apple},{id:2,type:banana},{id:3,type:mango}]
Then I iterate over this array from a page template:
<div ng-repeat="item in items">
<my-item item-type="{{item.type}}"></my-item>
</div>
myItem is a directive defined as follows:
function () {
function resolveTemplate(element, attrs) {
var itemType = '';
if (itemType === 'apple') {
return 'apple.html';
} else {
return 'default.html';
}
}
return {
restrict: 'E',
templateUrl: resolveTemplate,
link: function (scope, element, attrs) {
// nothing here
}
};
}
I've tried to use:
scope: {
'itemType': '#'
}
But it appears that I can call attrs.itemType only from link() and not from resolveTemplate() function (where the unprocessed {{item.type}} is returned).
So what will be a correct way to dynamically choose a template in this situation?

Answer 1

From angularjs docs: https://docs.angularjs.org/guide/directive
Note: You do not currently have the ability to access scope variables
from the templateUrl function, since the template is requested before
the scope is initialized.
You can however have access to some angularjs service in your resolveTemplate function. So if possible, you can pull in the itemType from the service instead. Your directive would look something like below:
app.directive('myDirective', function(templateResolveService){
function resolveTemplate(element, attrs) {
var itemType = templateResolveService.getItemType();
if (itemType === 'apple') {
return 'apple.html';
} else {
return 'default.html';
}
}
return {
restrict: 'E',
templateUrl: resolveTemplate,
link: function (scope, element, attrs) {
// nothing here
}
};
}