$ templateCache undefined In the directive, although I set `{cache: $ templateCache}` to $ http call

Question

I have two html pages, snippet1.htmland snippet2.html. I want to use them in my directive. Because I'm going to add several templates using a single directive.

I tried this thing by adding html templates inside the tag <script>and gave them type="text/ng-template"as shown below.

<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>

And then I use $templateCache.get('snippet1.html'). This implementation is working fine.

But in my case, I need to download them from html itself, so I decided to download the ajax template and do $http cache: $templateCache

Working jsfiddle

Run block

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

But inside my controller $templateCache.get('snippet1.html')there is undefined.

My question is: why does it work while I declared a template inside <script>' tag & Why it don't work when I html inside$ templateCache while making$ http` ajax call?

Plunkr

- ? .

. .

Answer 1

, , . , , . , , , console.log($templateCache.get('snippet1.html')) undefined - , $http.get .

api $templateCache, - , ajax. , , , $templateCache

console.log($templateCache.info())

{id: "templates", size: 0}

JS ,

setTimeout(function() {
    console.log($templateCache.info())
}, 1000);

{id: "templates", size: 2}

, ... . , -. $q $rootScope .run

myApp.run(['$templateCache', '$http', '$q', '$rootScope', function($templateCache, $http, $q, $rootScope){ 
    $q.all([
        $http.get('snippet1.html',{ cache : $templateCache }),
        $http.get('snippet2.html',{ cache : $templateCache }) 
    ]).then(function(resp){
        $rootScope.templateCache = resp
    })
  }]
); 

, , var $rootScope $rootScope.templateCache $watch . $templateCache, , $rootScope.templateCache, , $q promises

link: function(scope, element, attrs) {
    scope.$parent.$parent.$watch('templateCache', function(n, o) {
        if(n) {
            element.append($compile($templateCache.get('snippet1.html')[1])(scope));
        }
    });
}

! . scope.$parent.$parent , scope , , $rootScope.

, , ? ! , , , , . .

Plunker Link

,

var providers = {};

var $injector = angular.injector(['ng']);

var myApp = angular.module('myApp', []);

$injector.invoke(function($http, $q, $templateCache, $document) {
    $q.all([
        $http.get('snippet1.html',{ cache : $templateCache }),
        $http.get('snippet2.html',{ cache : $templateCache }) 
        ]).then(function(resp){
            providers.cacheProvider = $templateCache;
            angular.bootstrap($document, ['myApp']);
        });
    });

myApp
.controller('test',function() {
})
.directive('myTemplate', function ($templateCache, $compile) {
    return {
        restrict: 'EA',
        scope: {
            snippets: '='
        },
        link: function(scope, element, attrs) {
            element.append($compile(providers.cacheProvider.get('snippet1.html')[1])(scope));
        }
    };
});

Plunker

Answer 2

. script, angular , - . .

$templateCache.put() ( $http.get html , , angular ajax . " " ", - .

( ), , .

"" , , - $templateCache , $http . , $http $templateCache.get . , , $http.

, $timeout $watch. , promises.

myApp.controller('test',function(){})
    .directive("myTemplate", function ($http, $compile) {
    return {
        restrict: 'EA',
        scope: {
            template: '&?myTemplate',
            src: '&?'
        },
        link: function(scope, element, attrs) {
            $http.get(scope.template() || scope.src()).then(function(result) {
                element.append($compile(result.data)(scope));
            });
        }
    };
});

<my-template src="snippet1.html"></my-template>

<div my-template="snippet1.html"></div>

Plunk

EDIT: $http

myApp.controller('test',function(){})
    .directive("myTemplate", function ($http, $compile) {
    return {
        restrict: 'EA',
        scope: {
            snippets: '='
        },
        template: 'snippet1.html',
        link: function(scope, element, attrs) {

        }
    };
});

( [1], html-$ http-, html - , ( script). , , , . , .

- $templateCache .

EDIT: $http, , .

if (cache) {
    cachedResp = cache.get(url);
    if (isDefined(cachedResp)) {
      if (isPromiseLike(cachedResp)) {
        // cached request has already been sent, but there is no response yet
        cachedResp.then(resolvePromiseWithResult, resolvePromiseWithResult);
      } else {
        // serving from cache
        if (isArray(cachedResp)) {
          resolvePromise(cachedResp[1], cachedResp[0], shallowCopy(cachedResp[2]), cachedResp[3]);
        } else {
          resolvePromise(cachedResp, 200, {}, 'OK');
        }
      }
    } else {
      // put the promise for the non-transformed response into cache as a placeholder
      cache.put(url, promise);
    }
  }