15

I want to check the content of the $templateCache by accessing it from the devtool's console.

I tried the solution given at: https://stackoverflow.com/a/24711132.

This didn't work for me.

How can i do that?

Community
  • 1
  • 1
Vinay K
  • 5,562
  • 1
  • 18
  • 27

2 Answers2

21

I tried this approach just now and get a defined template:

This is my predefined template:

<script type="text/ng-template" id="template.html">
    <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        </div>
    </div>
</script>

On the Chrome devtools console (supposed name of your application is "ng-app"):

> var ngAppElem = angular.element(document.querySelector('[ng-app]') || document);
> ngAppElem.injector().get('$templateCache').get('template.html')
> "
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
  "
> 

I got help from this snippet: https://gist.github.com/mzgol/7893061

okanozeren
  • 555
  • 4
  • 10
  • 1
    Here's an alternative expression that doesn't require you to name your app explicitly: `angular.element(document.querySelector('.ng-scope')).injector().get('$templateCache')` – John Rix Sep 29 '17 at 09:58
10

One-liner for lazy people:

angular.element(document.body).injector().get('$templateCache').get('<your/file.html or key>')
JanisP
  • 1,233
  • 15
  • 16