绑定表单引用传递给父指令中的子指令

Question

我已经创建了一个tabs指令，其中tab指令作为子指令。一些标签我想成为一个下拉菜单并向右拉，其他标签只是普通标签，我可以禁用。

// Form Directive markup, which just has an isolated scope to content fetched 
// from the server, and handles submission of the form in linker

some directive markup...

    <form name="mainForm" role="form"
          ng-submit="submit( mainForm.$valid )"
          novalidate>

      <tabs>

        <tab title="Tab 1">
          List of subforms using ngForm.
        </tab>

        <tab title="Tab 2">
          Review validated form, otherwise disabled.
        </tab>

        <tab title="Options" 
                  type="dropdown" 
                  menu="{{[{ name: 'Save form', action: '...' }]}}"></tab>

      </tabs>

    </form>

...some more directive markup

我无法弄清楚如何将type =“dropdown”传递到父标签以将其设置为下拉列表。这在编译后很好地发生，因此不确定如何操作tabs指令。我似乎已经禁用了工作，虽然它是强制在标签2上的黑客，不知道如何解决。

// Tabs Directive
.directive('tabs', [function() {

    return {
        restrict: 'E',
        templateUrl: '/app/components/form-tabs/formtabs.html',
        scope: true,
        transclude: true,
        require: '^form', 
        link: function( $scope, $element, $attribs, formCtrl ) {
            $scope.formCtrl = formCtrl; // reference to main form directive
        },
        controller: "TabsController",
        controllerAs: "tabsCtrl"
    };
}]);

// Tabs template
<div class="tab-container">
    <ul class="nav nav-tabs" role="tablist">

        <li ng-repeat="tab in tabs"
            ng-class="{ active: isSelectedTab( $index ), disabled: isDisabledTab( $index ) }">
            <a href ng-click="selectTab( $index )" 
                    ng-bind="tab.title"></a>
        </li>

    </ul>
    <div ng-transclude></div>
</div>

// Tabs Controller
.controller('TabsController', ['$scope', function( $scope ) {

    var self = this;
    var currIndex = 0;

    $scope.tabs = [];

    self.registerTab = function( title, type, scope ) {

        // What do I do with type?  How else would I do this?

        // Set default selected tab
        if( $scope.tabs.length === 0 ) {
            scope.selected = true;
        }
        else {
            scope.selected = false;
        }

        $scope.tabs.push( { title: title, scope: scope } );
    };

    $scope.selectTab = function( index ) {

        // Check tab is not disabled
        if( $scope.tabs[ index ].scope.disabled !== true ) {

            currIndex = index;

            for( var ndx = 0; ndx < $scope.tabs.length; ndx++ ) {
                $scope.tabs[ ndx ].scope.selected = (currIndex === ndx);
            }
        }
    };

    $scope.isSelectedTab = function( index ) {

        return (currIndex === index);
    };

    $scope.isDisabledTab = function( index ) {

        // Enable/disable second tab only
        if( index === 1 ) {

            // Check if form is invalid
            var isInvalid = !$scope.formCtrl.$invalid;

            // Set tab disabled value, and return
            $scope.tabs[1].scope.disabled = isInvalid;
            return isInvalid;
        }
        else {
            return false; // otherwise always enabled
        }
    };
}]);

// Tab Directive
.directive('tab', [function() {

    return {
        restrict: 'E',
        template: '<div ng-show="selected" ng-transclude></div>',
        require: '^tabs',
        scope: true,
        transclude: true,
        compile: function( $element, $attrs ) {

            // Remove attribute from child
            $element.removeAttr('type');
            $element.removeAttr('menu');

            return function( $scope, $element, $attrs, tabsCtrl ) {

                // Extract dropdown tabs and push onto tab scope
                if( $attrs.type === 'dropdown' ) {
                    $scope.dropdown = angular.fromJson( $attrs.menu ); 
                }

                tabsCtrl.registerTab( $attrs.title, $scope );
            }
        }
    };
}]);

我想要做的是在下面，但是tab指令是窗格，我无法弄清楚如何构建它们，并与父级和表单进行通信。

<form>
<tabs>
    <tab title="Tab 1">
      <ng-form></ng-form>
      <ng-form></ng-form>
    </tab>
    <tab title="Tab 2">
      Disabled till form valid.
    </tab>
    <tab title="Tab Dropdown" type="dropdown"></tab>
</tabs>
</form>

更新 我推高了属性，并在ngRepeat中构建了不同的标签。关于如何让它更光滑的任何建议？否则，它会起作用。

// Tabs Directive
<div class="tab-container">
<ul class="nav nav-tabs" role="tablist">

    <li ng-repeat="tab in tabs"
        ng-class="{ 'active': isSelectedTab( $index ), 
                    'disabled': isDisabledTab( $index ),
                    'dropdown pull-right' : tab.scope.dropdown }">

        <!-- Default tab -->
        <a href ng-click="selectTab( $index )" 
                ng-bind="tab.title"
                ng-if="!tab.scope.dropdown"></a>

        <!-- Dropdown tab -->
        <a href class="dropdown-toggle" 
                data-toggle="dropdown"
                ng-if="tab.scope.dropdown">
            <span ng-bind="tab.title"></span> 
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" 
            role="menu"
            ng-if="tab.scope.dropdown">
            <li ng-repeat="menu in tab.scope.dropdown">
                <a href ng-bind="menu.name"></a>
            </li>
        </ul>

    </li>

</ul>
<!-- Tab pane content -->
<div ng-transclude></div>
</div>