AngularJS - How to transclude through directive, which has no transclusion?

问题

folks! I have used AngularJS for a while and decided to put up a component system using directives with transclusion. One day I encountered a problem I was unable to overcome. The problem has to do with my directive, most likely.

In order to understand what the problem is, I will briefly go through the basic idea, how "the system" is supposed to operate.

Structure

I have a directory dedicated for components:

For each component, I have HTML markup and CSS file in the components directory as follows:

And, HTML and CSS of component "nav" are like this:

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%;
}

Usage

Components use directive "example-component". Here's an example of how it is used:

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

Name is the name of component in the components directory.

Directive

Now, after explaining some background here's the implementation of the directive and some other services and controllers utilized by the service:

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);
        }
    };
}]);

Yes, I do acknowledge the problem with stylesheets array, but let us not stick to that, unless it is relevant to the question. :-)

Problem

The problem is mainly with the transclusion. As you can see from the directive implementation, it utilizes ng-include to fetch HTML contents. Because components should have the possible to translude for subcomponents, transclusion is to go through ng-include, if I understand correctly. At least this is the error I received in my console in Chrome:

According to AngularJS documentation there are two ways to deal with this problem (see this link for more information):

To resolve, either remove the offending ngTransclude or check that transclude: true is included in the intended directive definition.

But none of the options can resolve my issue, these fixes simply won't do it! I can't add transclude: true to ng-include - or can I?

So, my question is: how to transclude through directive, which has no transclusion?

来源：https://stackoverflow.com/questions/38442077/angularjs-how-to-transclude-through-directive-which-has-no-transclusion