属性のスコープ変数経由でtemplateUrlを渡す方法

Question

私はスコープ変数を介してテンプレートのURLを渡そうとしています。スコープは変更されないので、テンプレートはそれに基づいて更新する必要はありませんが、現在はスコープ変数は常に定義されていません。

<div cell-item template="{{col.CellTemplate}}"></div> 

理想的にはディレクティブが次のようになります。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      templateUrl: template // or {{template}} - either way 
     }; 
    }]) 

しかし、これは動作しません。私は同じコンセプトを達成するために多くの異なる順列を試しましたが、これは最も近いようですが、それでも動作しません。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      link: function (scope, element, attrs) { 
       var templateUrl = $parse(attrs.template)(scope); 
       $http.get(templateUrl, { cache: $templateCache }).success(function (tplContent) { 
        element.replaceWith($compile(tplContent)(scope)); 
       }); 
      } 
     }; 
    }]) 

また、ng-includeを使ってみましたが、コンパイルする前にスコープ変数も評価していません。 CellTemplateの値はデータベース呼び出しから取得されるため、評価前に完全に不明です。この作業を行うための提案は非常に高く評価されます！

編集： 角度1.0.8を使用しており、新しいバージョンにアップグレードできません。

Answer 1

あなたはまったく離れているわけではありません。

ディレクティブに分離スコープを使用する必要はありません。あなたはこのようtemplateUrlを渡すことができます。

<div cell-item template="col.CellTemplate"></div> 

続いたときに、テンプレート値の変化を検出するために時計を追加します。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      restrict: 'A', 
      link: function(scope , element, attrs) { 

       scope.$watch(attrs.template, function (value) { 
       if (value) { 
        loadTemplate(value); 
       } 
       }); 

       function loadTemplate(template) { 
        $http.get(template, { cache: $templateCache }) 
        .success(function(templateContent) { 
         element.replaceWith($compile(templateContent)(scope));     
        });  
       } 
      } 
     } 
    }]); 

は

ここでの作業Plunkerです：http://plnkr.co/edit/n20Sxq?p=preview

Answer 2

そうでない場合はリンクロジックを自分で処理したい、あるいは分離スコープが必要な場合は、これは簡単だと思います。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      template: "<div ng-include='template'></div>" 
     }; 
    }]) 

か：

template:"<ng-include src='template'></ng-include>" 

Answer 3

それは古いポストですが、誰もが答えをここに土地ならば、私はその便利を考えました。

コメントに記載されている@caubとしてtemplateUrl関数を試すことができます。コンポーネントでも同じことが使用できます。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
    return { 
     templateUrl: function(element, attrs) { 
      return attrs.template || 'someDefaultFallback.html'; 
     } 
    }; 
}]); 

ここに注入された依存関係は必要ありません。これが誰かを助けることを望みます。