Question

使用Angular 1.3.15，UI Bootstrap 0.12.1和UI路由器0.2.13。

鉴于此标记：

<tabset type="tabs">
    <tab ui-sref="home.state1" ui-tabbed-state heading="tab1"></tab>
    <tab ui-sref="home.state2" ui-tabbed-state heading="tab2"></tab>
    <tab ui-sref="home.state3" ui-tabbed-state heading="tab3"></tab>
    <tab ui-sref="home.state4" ui-tabbed-state heading="tab4"></tab>
</tabset>
<ui-view />

和我的自定义ui-tabbed-state指令：

function uiTabbedStateDirective()
{
    return {
        restrict: 'A',
        require: '^tab',
        controller: [ '$element', '$state', function($element, $state) {
            var tabset = $element.controller('tabset');
            var tab    = $element.isolateScope();   // or $element.children().scope(); 
            var sref   = $element.attr('ui-sref');

            if (tabset && tab && sref && sref === $state.current.name)
                tabset.select(tab);
        }]
    };
}

我可以在应用程序来回导航，刷新等时根据当前状态/ URL选择正确的选项卡。

麻烦的是，$element.isolateScope()（和$element.scope()就此而言）只能在启用调试数据的情况下使用。调试数据被禁用时是否有任何等效功能或某些解决方法？

Answer 1

好的，回答我自己的愚蠢问题。

简答：RTFM。

答案很长：UI路由器已经有一个ui-sref-active指令就可以完成。 OMG。

    <tabset type="tabs">
        <tab ui-sref="home.state1" ui-sref-active="active" heading="tab1"></tab>
        <tab ui-sref="home.state2" ui-sref-active="active" heading="tab2"></tab>
        <tab ui-sref="home.state3" ui-sref-active="active" heading="tab3"></tab>
        <tab ui-sref="home.state4" ui-sref-active="active" heading="tab4"></tab>
    </tabset>

当debugInfoEnabled为false时，$ element.isolateScope（）的替代方法？

1 个答案: