如何嵌套创建为单独模块的指令

Question

我想区分我的文件和模块。以下代码所发生的事情的主旨是我正在使用angular指令来创建一个列出部门的数据表。我想要发生的是能够在数据表中为每一行嵌套另一个指令，显示一些按钮，这些按钮将连接到某些事件并被输入一些参数。现在不加载/响应/做任何事情。我能完成在单独模块中声明的指令嵌套吗？另外，该指令是否会为每一行调用模板，这是一个糟糕的设计吗？

主模块文件。容纳控制器

angular.element(document).ready(function () {
    "use strict";

    var deptApp = angular.module('deptApp', ['possumDatatablesDirective','EditDeleteRowControls']);

    function DepartmentCtrl(scope, http) {
        scope.depts = [];

        scope.columnDefs = [
        { "mData": "Id", "aTargets": [0], "bVisible": false },
        { "mData": "Name", "aTargets": [1] },
        { "mData": "Active", "aTargets": [2] },
        { "mDataProp": "Id", "aTargets": [3], "mRender": function (data, type, full) {
            return '<row-controls></row-controls>';
        }
        }
        ];



        http.get(config.root + 'api/Departments').success(function (result) {
            scope.depts = result;
        });
    };

    DepartmentCtrl.$inject = ['$scope', '$http'];

    deptApp.controller('DepartmentCtrl', DepartmentCtrl);

    angular.bootstrap(document, ['deptApp']);
});

第二个模块

// original code came from here http://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs
// just giving credit where it's due.

var possumDTDirective = angular.module('possumDatatablesDirective', []);

possumDTDirective.directive('possumDatatable', ['$compile', function ($compile) {
    "use strict";
    function Link(scope, element, attrs) {
        // apply DataTable options, use defaults if none specified by user
        var options = {};
        if (attrs.possumDatatable.length > 0) {
            options = scope.$eval(attrs.possumDatatable);
        } else {
            options = {
                "bStateSave": true,
                "iCookieDuration": 2419200, /* 1 month */
                "bJQueryUI": false,
                "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                "bDestroy": true,
                "bProcessing": true,
                "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $compile(nRow)(scope);
                }
            };
        }

        // Tell the dataTables plugin what columns to use
        // We can either derive them from the dom, or use setup from the controller           
        var explicitColumns = [];
        element.find('th').each(function (index, elem) {
            explicitColumns.push($(elem).text());
        });
        if (explicitColumns.length > 0) {
            options["aoColumns"] = explicitColumns;
        } else if (attrs.aoColumns) {
            options["aoColumns"] = scope.$eval(attrs.aoColumns);
        }

        // aoColumnDefs is dataTables way of providing fine control over column config
        if (attrs.aoColumnDefs) {
            options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
        }


        // apply the plugin
        scope.dataTable = element.dataTable(options);

        // if there is a custom toolbar, render it.  will need to use toolbar in sdom for this to work
        if (options["sDom"]) {
            if (attrs.toolbar) {
                try {
                    var toolbar = scope.$eval(attrs.toolbar);
                    var toolbarDiv = angular.element('div.toolbar').html(toolbar);
                    $compile(toolbarDiv)(scope);
                } catch (e) {
                    console.log(e);
                }
            }

            if (attrs.extraFilters) {
                try {
                    var filterBar = scope.$eval(attrs.extraFilters);
                    var filterDiv = angular.element('div.extraFilters').html(filterBar);
                    $compile(filterDiv)(scope);
                } catch (e) {
                    console.log(e);
                }
            }
        }
        // this is to fix problem with hiding columns and auto column sizing not working
        scope.dataTable.width('100%');




        // watch for any changes to our data, rebuild the DataTable
        scope.$watch(attrs.aaData, function (value) {
            var val = value || null;
            if (val) {
                scope.dataTable.fnClearTable();
                scope.dataTable.fnAddData(scope.$eval(attrs.aaData));
            }
        }, true);

        if (attrs.selectable) {

            // respond to click for selecting a row
            scope.dataTable.on('click', 'tbody tr', function (e) {
                var elem = e.currentTarget;
                var classes = foo.className.split(' ');
                var isSelected = false;

                for (i = 0; i < classes.length; i++) {
                    if (classes[i] === 'row_selected') {
                        isSelected = true;
                    }
                };


                if (isSelected) {
                    scope.dataTable.find('tbody tr.row_selected').removeClass('row_selected');
                    scope.rowSelected = false;
                }
                else {
                    scope.dataTable.find('tbody tr.row_selected').removeClass('row_selected');
                    elem.className = foo.className + ' row_selected';
                    scope.selectedRow = scope.dataTable.fnGetData(foo);
                    scope.rowSelected = false;
                }
            });
        }
    };


    var directiveDefinitionObject = {
        link: Link,
        scope: true, // isoalte the scope of each instance of the directive.
        restrict: 'A'
    };

    return directiveDefinitionObject;
} ]);

第三个模块

var EditDeleteRowControls = angular.module('EditDeleteRowControls', []);

function EditDeleteRowControlsDirective() {
    "use strict";

    var ddo = {
        templateUrl: config.root + 'AngularTemplate/RowEditDeleteControl',
        restrict: 'E'
    };

    return ddo;
};


EditDeleteRowControls.directive('rowControls', EditDeleteRowControlsDirective);