web-dev-qa-db-ja.com

Angularディレクティブで外部テンプレート（templateURL）で$ compileを使用する

テンプレート変数を使用し、link関数でコンパイルされる再帰的なAngularディレクティブがあります。

問題は、テンプレートが非常に長くなり、制御不能になり、外部HTMLファイルで外部化したいことです（たとえば、自動インデントが簡単になります）。

$compile内で使用できるディレクティブに外部テンプレートをロードするにはどうすればよいですか？

templateURLを見てきましたが、変数に名前を付けて$compile関数に渡すことはできません。

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

そして

angularjstemplatesangularjs-directiveexternal
47
CodyBugstein

$templateRequestサービスを使用して、テンプレートを取得できます。これは、$templateCacheにテンプレートをキャッシュする便利なサービスであるため、template.htmlへの単一の要求のみが行われます。

実例として（そして再帰的ディレクティブの問題に入らないで）、これは次のように使用されます：

link: function(scope, element){
   $templateRequest("template.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

plunker （ネットワークタブをチェックして、単一のネットワーク要求を確認します）

104
New Dev

サイズが大きい場合は、$ httpを使用してテンプレートをロードすることを好みます。

$http.get('mytemp.html').then(function(response) {
            element.html(response.data);
            $compile(element.contents())(scope);
            });
3
squiroid