javascript - inner directive in nested directives not showing up -

i trying set nested directives in angularjs reason inner directive never shows in html. have followed couple different tutorials still cannot figure out i'm doing wrong.

in following code trying routeeditor directive nest inside mapeditor directive. every time inspect html element shows outer mapeditor html. , there no errors in console.

<div class="mapeditor"> </div> 

this i've got:

mapeditor.js

define(['jquery','ng', 'raphael', 'text!./mapeditor/mapeditor.html'],function($, ng, raphael, template) {   var mapeditor = ng.module("mapeditor", []);   mapeditor.directive('mapeditor', ['units', function(units) {     return {       restrict: 'e',       template: template,       scope: {       },       link: function(scope, element, attrs) {        }     }   }]);    return mapeditor;  }); 

routeeditor.js

define(['jquery','ng', 'raphael', 'text!./routeeditor/routeeditor.html'],function($, ng, raphael, template) {   var routeeditor = ng.module("routeeditor", []);   routeeditor.directive('routeeditor', ['units', function(units) {     return {       restrict: 'e',       template: template,       scope: {       },       link: function(scope, element, attrs) {        }     }   }]);    return routeeditor;  }); 

mapeditor.html

<div class="mapeditor"> </div> 

routeeditor.html

<div class="routeeditor"> </div> 

and in controller's html

<map-editor>     <route-editor>     </route-editor> </map-editor> 

your map directive need use transclude:

mapeditor.directive('mapeditor', ['units', function(units) {     return {         transclude: true,         //...     } }); 

and in map template, specify want put transclude content:

<div class="mapeditor">     <div ng-transclude ></div> </div> 

more detail: https://docs.angularjs.org/api/ng/directive/ngtransclude