CODEWITHSUNDEEP
javascripthtmlangularjs
Mike S
Mike S

Reputation: 11409

inner directive in nested directives not showing up

I am trying to set up nested directives in AngularJS but for some reason the inner directive never shows up in my HTML. I have followed a couple different tutorials but still cannot figure out what I'm doing wrong.

In the following code I am trying to get the routeEditor directive to nest inside the mapEditor directive. But every time I inspect my HTML element it always only shows the outer mapEditor HTML. And there are no errors in my console.

<div class="mapEditor">
</div>

This is what 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 my controller's HTML

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

Upvotes: 0

Views: 210

Answers (1)

Phuong Nguyen
Phuong Nguyen

Reputation: 3070

Your map directive need to use transclude:

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

and in your map template, specify where do you want to put the transclude content:

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

More detail: https://docs.angularjs.org/api/ng/directive/ngTransclude

Upvotes: 1

Related Questions