我正在尝试在 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;
});
map 编辑器.html
<div class="mapEditor">
</div>
routeEditor.html
<div class="routeEditor">
</div>
在我的 Controller 的 HTML 中
<map-editor>
<route-editor>
</route-editor>
</map-editor>
最佳答案
您的 map 指令需要使用 transinclude:
mapEditor.directive('mapEditor', ['units', function(units) {
return {
transclude: true,
//...
}
});
并在 map 模板中指定要将嵌入内容放置在何处:
<div class="mapEditor">
<div ng-transclude ></div>
</div>
更多详细信息:https://docs.angularjs.org/api/ng/directive/ngTransclude
关于javascript - 嵌套指令中的内部指令未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30927239/