Question

我目前遇到了这个问题：我制作了3个指令（检查plunkr为'简化'测试用例，不介意它们来自Typescript的闭包）控制标签，使用控制器将它们分组，因为我可以有更多当前视图中的一个选项卡式内容。当选项卡本身具有一些位于范围之外的绑定时，当选项卡被“转换”到位时，绑定永远不会更新，因为范围不同。

这是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);
    };

当前的方法感觉hacky（将原始范围和元素保持在数组中）。另外在我的应用程序中，数据在加载选项卡后加载，因此它甚至不能保留一些初始状态。标签现在看起来像这样：

current tabs

以及它的外观（但不起作用，因为你可以看到点击一个标签选择所有这些标签）：

the way it should be

我的应用中的真实标签代码：

<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只是将其分配给登录和用户控制器的指令。 checkout是ui-view内的当前控制器。

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

由于checkout控制器只能实例化一次，我无法重新实例化，但仍需要访问它的函数和绑定数据。

'/templates/partials/plans/checkout'包含上面的标签代码（所以是的，技术上它与checkout控制器的范围相同）

Answer 1

在您的plunker中，将标签更改为：

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

显示总和。我查看了什么是子菜单，你将它作为一个指令，这就是为什么subctrl.sum不起作用的原因。使用它的Plunker：http://plnkr.co/edit/qwEHMqfzJ6pC79hM8cDj?p=preview

如果您的申请没有问题，请再详细说明一下。

Answer 2

通过删除选项卡的html内容，并将不同的范围应用于内部内容，然后重新连接到原始元素来解决此问题。

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

    el = item.element.filter('.is-tab');
    var contents = el.html(); //added
    el.empty(); // added

    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);
    item.element.append($compile('<div>' + contents + '</div>')(item.scope)); //added

    element.replaceWith(item.element);
};

丰富的标签和已转换的内容

2 个答案: