AngularJS：创建子指令以包含作为父指令

Question

我正在使用带有D3的AngularJS在页面上创建一些图表。有不同的部分代表不同类型的图表。在每个部分中，将有2-3个图表。所有部分都使用相同的控制器，但每个部分都有一个指令。以下是代码的基本结构：

    angular.module('main', [''])
    .config(function($routeProvider) {

        $routeProvider.when('/main-page', {templateUrl: 'main-page.html'})

    })

    .controller('mainController', function($scope) {

        $scope.chartData = { type: "Bar Chart", data: {} };

    })

    .directive('primarySection', function() {

        return {

            restrict: 'E',
            replace: true,
            scope: {
                chartData: '=';
            },
            templateUrl: 'directives/primary-section.html'

        };

    });

我想为每种类型的图表创建一个指令，我将其放在特定的部分中。但我希望它作为section指令的子节点（例如：primarySection指令可以有不同的子指令，如条形图，折线图等）。如果可能的话，我不希望子指令在'main'应用程序（在其上定义父指令）上，或者在另一种语言中，使用'mainController'（父指令正在使用）。我并不熟悉指令的'require'和'controller'属性，所以我无法弄清楚如何构造这种指令。

所以我基本上想要将子指令（包含父指令/部分的图表）构建为一个单独的功能单元，我可以将它放在父指令下，并且可以从父指令获取数据并返回数据回来了。但它们应该在逻辑上“在'父指令下（数据和范围）。

你能帮忙吗？

Answer 1

您不需要让您的孩子指令取决于您的父指令。我看到两种方法：

• Transclusion：你的父指令将只是一个容器，并且将包含你作为子节点放置的所有内容，这是最简单但最基本的，如果出现在多个页面上则需要一些复制/粘贴：< / p>

                                  ..其他开关     

• 在父指令中生成HTML。基本上你在父指令的link函数中移动ng-repeat + ng-switch来生成HTML，然后用$compile编译它并将其附加到你的dom使用{{ 1}}链接函数的变量。这意味着如果您有一种新的图表，则需要更新您的父指令。

就我而言，你不需要在你的孩子和父母指令之间进行真正的沟通，这种绑定似乎已经足够了。如果你需要一些真正绑定这些指令的更复杂的东西，你需要添加以下元素：

element

对于一个完整的工作示例，我建议您检查角度消息源。除了一些黑暗的东西，你会发现它基本上遵循了我所说的。