AngularJS - 如何通过指令进行转换，没有转换？

Question

人们！我已经使用了AngularJS一段时间，并决定使用带有转义的指令来建立一个组件系统。有一天，我遇到了一个我无法克服的问题。问题很可能与我的指令有关。

为了解问题是什么，我将简要介绍一下基本概念，＆＃34;系统＆＃34;应该运作。

结构

我有一个专门用于组件的目录：

对于每个组件，我在components目录中都有HTML标记和CSS文件，如下所示：

并且，组件的HTML和CSS＆＃34; nav＆＃34;是这样的：

HTML

<div class='example-nav'>
    <ng-transclude></ng-transclude>
</div>

CSS

.example-nav{
    background:linear-gradient(#BA5454, #B34444);
    border-bottom:2px solid #E86B6B;
    box-shadow:0 4px 4px rgba(0, 0, 0, 0.125);
    height:48px;
    left:0;
    position:fixed;
    top:64px;
    width:100%;
}

用法

组件使用指令＆＃34; example-component＆＃34;。以下是如何使用它的示例：

<example-component name="nav"></example-component>

Name是组件目录中组件的名称。

指令

现在，在解释了一些背景知识后，该指令的实施以及该服务使用的其他一些服务和控制器：

var app = angular.module("example", []);

app.factory("ComponentsStyles", function(){
    return {
        stylesheets: []
    };
});

app.controller("HeadController", ["$scope", "ComponentsStyles",
function($scope, componentsStyles){
    $scope.stylesheetsComponent = componentsStyles.stylesheets;
}]);

app.directive("exampleComponent", ["ComponentsStyles",
function(componentsStyles){
    return {
        restrict: "E",
        scope: {
            name: "@"
        },
        transclude: true,
        template: "<ng-include src=\"'components/' + name + '.htm'\"></ng-include>",
        controller: function($scope){
            componentsStyles.stylesheets.push($scope.name);
        }
    };
}]);

是的，我确实承认样式表数组的问题，但是我们不要坚持这一点，除非它与问题相关。 ： - ）

问题

问题主要在于翻译。从指令实现中可以看出，它使用ng-include来获取HTML内容。因为组件应该可以为子组件转换，所以如果我理解正确，则转换是通过ng-include进行的。至少这是我在Chrome控制台中收到的错误：

根据AngularJS文档，有两种方法可以解决此问题（有关详细信息，请参阅此link）：

  

要解决此问题，请删除有问题的ngTransclude或检查   transclude：true包含在预期的指令定义中。

但是没有一个选项可以解决我的问题，这些修复只是不会做到这一点！我无法添加transclude：true到ng-include - 或者我可以吗？

所以，我的问题是：如何通过指令进行转换，该指令没有转换？