javascript - 丰富的选项卡和嵌入的内容

Question

我目前遇到这个问题:我制作了 3 个控制选项卡的指令(检查 plunkr 的“简化”测试用例，不要介意它们来自 Typescript 的闭包)，使用 Controller 将它们分组，因为我可以有更多多于当前 View 上的一个选项卡内容。当选项卡本身具有一些位于范围之外的绑定(bind)时，就会出现问题，并且当选项卡“嵌入”到位时，绑定(bind)永远不会更新，因为范围不同。

这是 plunkr http://plnkr.co/edit/fnw1oV?p=preview这是重要的“选项卡嵌入”部分

    this.link = function (scope, element, attr) {
        var clickEvent, el, item;
        item = scope.item;
        console.log(scope);

        el = item.element.filter('.is-tab');

        el.addClass('picker-tabs-item');

        clickEvent = 'tabs.select(item);';
        if (el.is('[ng-click]')) {
            clickEvent += el.attr('ng-click') + ';';
        }

        el.attr('ng-click', clickEvent);
        el.attr('ng-class', 'tabs.classes(item)');

        item.element = $compile(item.element)(scope);

        element.replaceWith(item.element);
    };

当前的方法感觉很老套(将原始范围和元素保留在数组中)。另外，在我的应用程序中，数据是在加载选项卡后加载的，因此它甚至无法保留某些初始状态。选项卡现在看起来像这样:

以及它应该是什么样的方式(但不起作用，因为您可以看到单击一个选项卡会选择所有选项卡):

我的应用程序中的真实选项卡代码:

<div class="clearfix" login-space user-space>
<div class="picker clearfix" ng-class="{'to-hide': user.data.get('incomplete') || checkout.checkoutForm.$invalid}">
    <div class="pick-title icon icon-pay">Forma de Pagamento</div>
    <div class="for-hiding">
        <div tabs="pagamento">
            <div tab="/templates/tabs/plans/credito" selected="true">
                <button class="is-tab clicky" ng-disabled="checkout.disabledTab('credito')" type="button">
                    Cartão
                    <span class="pick-pill-indicator-placeholder" ng-bind="checkout.total('credito')"></span>
                </button>
            </div>
            <div tab="/templates/tabs/plans/debito">
                <button class="is-tab clicky" ng-disabled="checkout.disabledTab('debito')" type="button">
                    Débito
                    <span class="pick-pill-indicator-placeholder" ng-bind="checkout.total('debito')"></span>
                </button>
            </div>
            <div tab="/templates/tabs/plans/boleto">
                <button class="is-tab clicky" ng-disabled="checkout.disabledTab('boleto')" type="button">
                    Boleto
                    <span class="pick-pill-indicator-placeholder" ng-bind="checkout.total('boleto')"></span>
                </button>
            </div>
        </div>
    </div>
</div>
</div>

login-space 和 user-space 是仅将其分配给登录和用户 Controller 的指令。 checkout 是 ui-view 内的当前 Controller 。

$stateProvider.state('planos.checkout', {
    url: '/checkout',
    templateUrl: '/templates/partials/plans/checkout',
    controllerAs: 'checkout',
    controller: Controllers.Checkout,
    data: {
        allowed: false,
        enclosed: true
    }
});

由于 checkout Controller 只能实例化一次，因此我无法重新实例化它，但仍然需要访问它的函数和绑定(bind)数据。

'/templates/partials/plans/checkout' 包含上面的选项卡代码(所以是的，从技术上讲，它与 checkout Controller 处于同一范围内)

Answer 1

在你的 plunker 中，将选项卡更改为:

<span data-subctrl="">{{ subctrl.sum('credito') }}</span>

显示总和。我查看了 subctrl 是什么，您将其作为指令，这就是 subctrl.sum 不起作用的原因。工作中的笨蛋:http://plnkr.co/edit/qwEHMqfzJ6pC79hM8cDj?p=preview

如果这不是您的应用程序的问题，请详细描述一下。