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.
