将 ui-router 与 Kendo TabStrip 一起使用答案

【问题标题】：Using ui-router with Kendo TabStrip将 ui-router 与 Kendo TabStrip 一起使用
【发布时间】：2015-10-02 21:13:44
【问题描述】：

我正在尝试实现一个 Kendo Tab Strip 并应用 ui-router 来显示选项卡的内容。我可以使用 ui-view 显示标签条，但不能显示内容。任何人都有如何使这些项目协同工作的示例。

我的 html 示例。

<div class="main-template">
    <div class="row">
        <h3>Welcome to the Dashboard</h3>
        <div ng-controller="Navigation">
            <div kendo-tab-strip k-content-urls="[ null, null]">
                <!-- tab list -->
                <ul>
                    <li class="k-state-active" url="#/invoice">Invoice Management</li>
                    <li url="#/shipment">Shipment Management</li>
                </ul>
            </div>
            <div ui-view></div>
        </div>
    </div>
</div>

【问题讨论】：

标签： angularjs angular-ui-router kendo-tabstrip

【解决方案1】：

我没有按照我应该的方式将所有内容合并在一起。在 li 标记中，我应该使用 ui-sref 而不是 url。

<div class="main-template" style="margin-left: 10px;">
    <div class="row">
        <h3>Welcome to the Dashboard</h3>
        <!--<a ui-sref="invoice">Invoice</a>
        <div ui-view></div>-->
        <div ng-controller="Navigation">
            <div kendo-tab-strip="tabs">
                <!-- tab list -->
                <ul>
                    <li class="k-state-active" ui-sref="invoice">Invoice Management</li>
                    <li ui-sref="shipment">Shipment Management</li>
                </ul>
            </div>
            <div ui-view></div>
        </div>

    </div>
</div>

【讨论】：