javascript - AngularJS directive templateUrl function using 2-way data binding -

this question has answer here:

• angular.js directive dynamic templateurl 6 answers

i try parameterize template of page using directive. have array of objects 'type' value. want use different templates when types different.

here tried:

directive.js

angular.module('core')   .directive('mysolutiondisplay', function () {     return {       restrict: 'e',       scope: {         solution: '='       },       templateurl: function (elem, attr) {         return 'path/to/template/solution-'+attr.type+'.template.html';       }     };   }); 

view.html

<div class="row">   <my-solution-display type="vm.solution[0].type" solution="vm.solution"></my-solution-display> </div> 

i following error : angular.js:11706 error: [$compile:tpload] failed load template: path/to/template/solution-vm.solution[0].type.template.html

i tried replacing type="vm.solution[0].type" type="{{vm.solution[0].type}}" added curly brackets error message.

attributes (attrs) has no access scope variable. dom value after have been interpolated.

so, use

<my-solution-display type="{{vm.solution[0].type}}" solution="vm.solution"> </my-solution-display>

note how type="vm.solution[0].type" changed type="{{vm.solution[0].type}}"