Why it did NOT include <sciprt><script> within a html when I import this html as angularjs directive?

Question

I tried some time, but no luck.

I am using angularjs. I am using @templateCache. https://docs.angularjs.org/api/ng/service/$templateCache

Let's say, I have a angularjs directive naming 'foo', this directive's template is 'foo.html'. In this 'foo.html', I have below code:

<h1>Below script is for template cache purpose</h1>
<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

In my another HTML, let's say 'bar.html'. In this html, I have<foo></foo>, it only load <h1>Below script is for template cache purpose</h1>, but when I check $templateCache.get('foo.html'), it did not have this 'foo.html'.

I have no idea how to solve my problem after I tried many ways.

P.S. If I

<script type="text/ng-template" id="templateId.html">
      <p>This is the content of the template</p>
    </script>

directly in 'bar.html'. $templateCache.get('foo.html') can fetch the 'foo.html'. But I do not want to directly put in 'bar.html', since I have many , and I want to keep it clean in separate file, and also do not break current code.

Addition question: If <foo></foo> works in my 'bar.html', and I do not want to let <h1></h1> of 'foo.html' appear in 'bar.html'. Do I let <foo ng-if = "false"></foo> in 'bar.html'? Or is there another way to do it? Extra all <script></script> into a new 'script.js' file, and let <script src="script.js"></script> in 'foo.html' and 'bar.html'?

Answer 1

When angular sees the type text/ng-template in a script tag, a compile function is executed. From angular source:

var scriptDirective = ['$templateCache', function($templateCache) {
  return {
    restrict: 'E',
    terminal: true,
    compile: function(element, attr) {
      if (attr.type === 'text/ng-template') {
        var templateUrl = attr.id,
            text = element[0].text;

        $templateCache.put(templateUrl, text);        
      }
    }
  };
}];

This compile function get the id attribute and calls $templateCache.put(idTemplate,template).

So to bar directive get the content of the $templateCache.get(idOfYourTemplate), he must be called after the script tag in foo was evaluated.

If the foo tags are inside the html of bar, bar controller/link function will be evaluated first than the evaluation of script tag in foo.

And to help you with your second question, you can pass a parameter to you foo directive to hide h1 content. You can do this way:

    (function() {
        'use strict';

        angular
            .module('app')
            .directive('foo', foo);

        foo.$inject = [];
        function foo() {
            // Usage:
            //
            // Creates:
            //
            var foo = {
                bindToController: true,
                controller: FooController,
                controllerAs: 'vm',
                link: link,
                restrict: 'E',
                templateUrl: 'directives/foo.html',
                scope: {
                    hideTitle : '=' 
                }

            };
            return foo;

            function link(scope, element, attrs) {
            }
        }
        /* @ngInject */
        function FooController () {

        }
    })();

The scope property specify the interface between your directive and the outside world. The equal sign '=' is for receive values in a two way data-binding.

And in your template, you'll put a ng-if to conditional the rendering with the value of the parameter:

<h1 ng-if="vm.hideTitle">Below script is for template cache purpose</h1>
<script type="text/ng-template" id="templateId1.html">
  <p>This is the content of the template</p>
</script> 

About your third question, if I understand correctly, you can put all your scripts in a unique file script.js and have all the things that angular offers to you.