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
Comments
Post a Comment