丰富的标签和嵌入​​的内容

Question

我目前有这个问题：我制作了 3 个指令（检查 plunkr 的“简化”测试用例，不要介意它们来自 Typescript 的闭包）控制选项卡，使用控制器将它们分组，因为我可以有更多比当前视图上的一个选项卡式内容。 The problem happens when the tab itself has some bindings that are located outside of the scope, and when the tab is 'transcluded' in place, the binding never updates because the scope is different.

这是 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 是仅将其分配给登录和用户控制器的指令。 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 是什么，您将其作为指令，这就是 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);
};