javascript - AngularJS:创建子指令以包含作为父指令子部分的部分

Question

我正在使用 AngularJS 和 D3 在页面上创建一些图表。有不同的部分代表不同类型的图表。每个部分都会有2-3张图表。所有部分都使用相同的 Controller ，但每个部分都有一个指令。下面是代码的基本结构:

    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'

        };

    });

我想为放置在特定部分中的每种类型的图表创建一个指令。但我希望它作为部分指令的子指令(例如:primarySection指令可以有不同的子指令，例如条形图、折线图等)。如果可能的话，我不希望子指令位于“主”应用程序(在其上定义了父指令)，或者在另一种语言中，使用“mainController”(父指令正在使用)。我不太熟悉指令的“require”和“controller”属性，所以我不知道如何构造这种指令。

所以我基本上想将子指令(其中将包含父指令/部分的图表)构造为一个单独的功能单元，我可以将其放在父指令下，并且可以从父指令获取数据并返回数据也回来了。但它们在逻辑上应该位于父指令“之下”(数据和范围方面)。

你能帮忙吗？

Answer 1

您不需要让您的子指令依赖于您的父指令。我看到有两种方法:

• 嵌入:您的父指令将只是一个容器，并将包含您作为子节点放置的所有内容，这是最简单但最基本的，如果存在于多个页面上，则需要一些复制/粘贴:

  ..其他开关

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

据我所知，您的 child 和 parent 指令之间不需要真正的沟通，绑定(bind)似乎就足够了。如果您需要更复杂的东西来真正绑定(bind)这些指令，您将需要添加以下元素:

// parent directive
controller:(scope, element, attr){
    this.method1 = function(){...}
}

// child directive
require:'^^primarySection'
link:function(scope, element, attrs, primarySectionCtrl){
   ..some code
   primarySectionCtrl.method1();
   ..
}

对于完整的工作示例，我建议您检查 Angular 消息源。除了一些黑暗的事情之外，你会发现它基本上遵循我刚才所说的。