javascript - $http 呼び出しで {cache: $templateCache} を設定しましたが、ディレクティブで $templateCache が未定義です

Question

私は 2 つの HTML ページsnippet1.html&を持っていsnippet2.htmlます。ディレクティブ内でそれらを使用したい。単一のディレクティブを使用して複数のテンプレートを追加するためです。

<script>タグ内にhtmlテンプレートを追加して、以下のように指定して、このことを試しましたtype="text/ng-template"。

<script type="text/ng-template" id="snippet1.html">
    <div>Here is Snippet one</div>
</script>

<script type="text/ng-template" id="snippet2.html">
    <div>Here is Snippet two</div>
</script>

そして、私は使用します$templateCache.get('snippet1.html')。この実装は正常に機能しています。

しかし、私の場合はhtml自体からロードする必要があるため、テンプレートをajaxでロードしてmakeすることにしました$http cache: $templateCache

ワーキング JSFiddle

実行ブロック

myApp.run(['$templateCache','$http', function($templateCache, $http){ 
  $http.get('snippet1.html',{ cache : $templateCache }); 
  $http.get('snippet2.html',{ cache : $templateCache }); 
}]);

しかし、私のコントローラーの内部$templateCache.get('snippet1.html')は未定義です。

私の質問は、<script>' tag & Why it don't work when I html inside$templateCache while making$http` ajax 呼び出し内でテンプレートを宣言しているときに機能するのはなぜですか?

問題のあるPlunkr

誰でもこの問題で私を助けることができますか? または、コードに何か不足しています。

助けていただければ幸いです。ありがとう。