I recently started working with AngularJS and came across an issue with nested directives. In my project, I have two directives:
MainDir.js
(function(){angular.module("mod").directive("mainDir", function(){
return {
restrict: "E",
scope: {},
link: function(scope, element, attributes) {
},
templateUrl: "components/main.html"
};
});})();
Main.html
<div>Main html</div>
<childDir> </childDir>
childDir.js
(function(){angular.module("mod").directive("childDir", function(){
return {
restrict: "E",
scope: {},
link: function(scope, element, attributes) {
},
templateUrl: "components/child.html"
};
});})();
child.html
<p>Hello World</p>
When the page loads, the text from main.html is displayed, but the directive fails to load. I've tried debugging by adding breakpoints in the link function, but it seems to not be reaching there.