Javascript 角度指令模板和子指令包含

我正在开发一套角度指令，用于驱动我正在为知识库应用程序开发的工具栏

我遇到的问题是让我的父指令处理嵌套在其中的关于父指令上模板的子指令

我想有一个这样的概念

-工具栏 ->按钮组 ->->钮扣

所以我有三条指令

xyz工具栏 xyz工具栏按钮组 xyz工具栏按钮

工具栏指令仅为限制属性。按钮组和按钮为限制E（仅限元素）

每个指令都有独立的作用域（我通过指令中的控制器链接传递内容）

但问题是我想在ByButtonGroup指令（内联）中使用一个模板，并让它包含任何按钮

例如，我有这样的标记（这是asp.net MVC中的主模板），它是一个局部视图，get加载到工具栏将呈现的标题中

<kb-toolbar>
    <kb-toolbar-button-group>
        <kb-toolbar-button kb-toggle="ng-class: Button.Toggled ? 'fa fa-2x fa-save': 'fa fa-2x fa-edit'" ng-attr-title="Button.Title">{{!Button.IsToggle ? Button.Text: ''}}</kb-toolbar-button>
    </kb-toolbar-button-group>
</kb-toolbar>

然后是按钮组

    app.modules.main.directive("kbToolbarButtonGroup", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        link: function ($scope, element, attrs) {
            console.log(element);
        },
        compile: function(element, attrs) {
            var content = element.children();
            console.log(content);
        },
        controller: function ($scope) {
            //TODO
        },
        template: '<ul class="nav navbar-nav">' +
            + '' + //I Don't know what to put in here, this is where the child directive needs to go
            '</ul>'
    };
});

app.modules.main.directive（“kbToolbarButtonGroup”，函数（）{
返回{
作用域：{}，
限制：'E'，
替换：正确，
链接：函数（$scope，element，attrs）{
控制台日志（元素）；
},
编译：函数（元素、属性）{
var content=element.children（）；
控制台日志（内容）；
},
控制器：功能（$scope）{
//待办事项
},
模板：'
'+
+''+//我不知道在这里放什么，这就是child指令需要放的地方
“
”
};
});

最后是按钮

    app.modules.main.directive("kbToolbarButton", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        link: function ($scope, element, attrs) {

        },
        controller: function ($scope) {
            //TODO
        },
        template: '<li><a href="">SomeButtonCompiled</a></li>'
    }
});

app.modules.main.directive（“kbToolbarButton”，函数（）{
返回{
作用域：{}，
限制：'E'，
替换：正确，
链接：函数（$scope，element，attrs）{
},
控制器：功能（$scope）{
//待办事项
},
模板：“
”
}
});

---

所以基本问题是kb工具栏按钮组呈现无序列表，但不包含子项。因此，我需要在该指令上的模板“”中添加一些内容，使其包含kb工具栏按钮。

您可以通过使用

transclude

inside

kbToolbarButtonGroup

指令来实现这一点，以便在您提到

ng transclude

的元素中呈现子内容

指令

app.modules.main.directive("kbToolbarButtonGroup", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        transclude: true,
        link: function ($scope, element, attrs) {
            console.log(element);
        },
        compile: function(element, attrs) {
            var content = element.children();
            console.log(content);
        },
        controller: function ($scope) {
            //TODO
        },
        template: '<ul class="nav navbar-nav">' +
            + '<ng-transclude></ng-transclude>' //added transclude here that will load child template here
            +'</ul>'
    };
});

app.modules.main.directive（“kbToolbarButtonGroup”，函数（）{
返回{
作用域：{}，
限制：'E'，
替换：正确，
是的，
链接：函数（$scope，element，attrs）{
控制台日志（元素）；
},
编译：函数（元素、属性）{
var content=element.children（）；
控制台日志（内容）；
},
控制器：功能（$scope）{
//待办事项
},
模板：'
'+
+''//在此处添加了将在此处加载子模板的transclude
+“
”
};
});

当我意识到您在buttonGroup指令中添加了transcluded:true时，它的工作非常出色。正是我想要的，谢谢。现在，我可以回到angular文档中，了解有关transclude的更多信息。@Ryios很高兴帮助您..谢谢：）@Ryios为此您需要使用将其传递到指令的隔离范围内的

kbToolbar

，然后

kbtoolbuttongroup

指令将具有

要求：“^kbToolbar”

选项。然后它可以访问链接函数中的parent指令我认为类的事情是自动发生的，但我希望类位于a标记上，所以我使用require并将父控制器传递给link。然而，我有一个新问题。ng transclude正在标记中生成一个ng transclude元素，它打破了引导样式。我需要它只包含ul->li->a，而不包含hte-ng-transclude元素

app.modules.main.directive("kbToolbarButtonGroup", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        transclude: true,
        link: function ($scope, element, attrs) {
            console.log(element);
        },
        compile: function(element, attrs) {
            var content = element.children();
            console.log(content);
        },
        controller: function ($scope) {
            //TODO
        },
        template: '<ul class="nav navbar-nav">' +
            + '<ng-transclude></ng-transclude>' //added transclude here that will load child template here
            +'</ul>'
    };
});