Question

我正在尝试在AngularJS中设置嵌套指令，但由于某种原因，内部指令永远不会出现在我的HTML中。我遵循了几个不同的教程，但仍然无法弄清楚我做错了什么。

在下面的代码中，我试图让routeEditor指令嵌套在mapEditor指令中。但每次我检查我的HTML元素时，它总是只显示外部mapEditor HTML。而且我的控制台没有错误。

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

这就是我所拥有的：

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>

在我的控制器的HTML

中

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

Answer 1

你的map指令需要使用transclude：

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

并在地图模板中指定您要将转码内容放在哪里：

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

更多细节：https://docs.angularjs.org/api/ng/directive/ngTransclude

嵌套指令中的内部指令未显示

1 个答案: