AngularJS directive templateUrl-Funktion mit 2-Wege-Datenbindung

Question

Ich versuche, die Vorlage einer Seite mithilfe einer Direktive zu parametrisieren. Ich habe ein Array von Objekten mit einem 'type' Wert. Ich möchte verschiedene Vorlagen verwenden, wenn die Typen unterschiedlich sind. Hier

ist, was ich versucht:

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> 

bekomme ich folgende Fehlermeldung: angular.js:11706 Error: [$compile:tpload] Failed to load template: path/to/template/solution-vm.solution[0].type.template.html

Ich habe versucht, type="vm.solution[0].type" durch type="{{vm.solution[0].type}}" zu ersetzen, aber es fügte nur die geschweiften Klammern zur Fehlermeldung hinzu.

Answer 1

Attribute (attrs) hat keinen Zugriff auf die Bereichsvariable. Sie erhalten den Dom-Wert, nachdem sie interpoliert wurden.

So verwenden

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

Beachten Sie, wie type="vm.solution[0].type"-type="{{vm.solution[0].type}}"