Angular 指令模板和 Child 指令包含

Question

我正在开发一组 angular 指令来驱动我正在为知识库应用开发的工具栏。

我遇到的问题是让我的 parent 指令处理嵌套在其中的关于 parent 指令模板的 child 指令。

我正在尝试有一个这样的概念，

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

所以我有三个指令

xyz-toolbar xyz-toolbar-按钮组 xyz-toolbar-按钮

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

每个指令都有独立的范围，（我通过指令中的控制器链接传递内容。）

但问题是我想通过按钮组指令（内联）使用模板并让它包含任何按钮。

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

<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>

现在我有一个 kb-toolbar 指令

    app.modules.main.directive("kbToolbar", function () {
    return {
        scope: {},
        restrict: 'A',
        link: function ($scope, element, attrs) {

        },
        controller: function ($scope) {
            var buttonGroups = new Array();
            this.addButtonGroup = function (buttonGroup) {
                buttonGroups.push(buttonGroup);
            }

            $scope.buttonGroups = buttonGroups;
        }
    }
});

然后是按钮组

    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("kbToolbarButton", function () {
    return {
        scope: {},
        restrict: 'E',
        replace: true,
        link: function ($scope, element, attrs) {

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

所以基本问题是kb-toolbar-button-group 呈现无序列表，但不包含children。因此，我需要在该指令的模板“”中添加一些内容，以使其在其中包含 kb-toolbar-按钮。

Answer 1

您可以通过在 kbToolbarButtonGroup 指令中使用 transclude 来实现此目的，以便在您提到 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>'
    };
});

Angular 指令模板和 Child 指令包含

Angular Directive Template and Child Directive inclusion

javascript

asp.net-mvc-4

angularjs

angularjs-directive

angularjs-ng-transclude