2ウェイデータバインディングを使用したAngularJSディレクティブのtemplateUrl関数

Question

ディレクティブを使用してページのテンプレートをパラメータ化しようとしました。 私は 'タイプ'値を持つオブジェクトの配列を持っています。タイプが異なる場合、私は異なるテンプレートを使いたいです。ここで

は、私が試したものです：

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> 

私は次のエラーを取得する： angular.js:11706 Error: [$compile:tpload] Failed to load template: path/to/template/solution-vm.solution[0].type.template.html

type="vm.solution[0].type"をtype="{{vm.solution[0].type}}"に置き換えようとしましたが、エラーメッセージに中括弧が追加されました。

Answer 1

属性（attrs）には、スコープ変数へのアクセス権がありません。それらは、補間された後にDOM値を得る。だから、

、type="vm.solution[0].type"がtype="{{vm.solution[0].type}}"