使用自定义部分时创建动态选项卡

时间:2017-07-17 07:20:20

标签: angularjs umbraco

创建自定义栏目时,您可以通过{ "userList": { "userA": { "password": "abc123" }, "userB": { "password": "abc123" } } } 文件将其添加到umbraco中,如:

Dashboard.config

如何动态创建标签,而不是<section alias="sectionName"> <areas> <area>mySection</area> </areas> <tab caption="Main"> <control> /App_Plugins/.../view.html </control> </tab> </section>

我有一个angularjs控制器,我从服务器获取一些数据。

1 个答案:

答案 0 :(得分:1)

希望这会帮助你顺利上路。这不是一个完整的答案,但它应该有所帮助。

子页面

我不相信您可以控制信息中心中的标签,而是必须将其硬编码到Dashboard.config中。这是因为Umbraco控制此页面上的标题。这允许不同的包在不同的黑客攻击的情况下向每个相同的仪表板添加部分。

但是,您可以动态控制子页面上的选项卡,例如/umbraco/#/mySection/myTree/edit-1?create。在子页面上,您可以创建和编辑标题。

<强> view.html

<div ng-controller="myNamespace.myController">
    <umb-panel>
        <umb-header tabs="content.tabs">
            <div class="row-fluid">
                View name
            </div>
        </umb-header>
        <umb-tab-view>
            <umb-tab id="tab1" rel="myTab1">
                Tab 1 content
            </umb-tab>
            <umb-tab id="tab1" rel="myTab2">
                Tab 2 content
            </umb-tab>
        </umb-tab-view>
    </umb-panel>
</div>

<强> controller.js

angular.module('umbraco').controller('myNamespace.myController',
    function ($scope) {
        $scope.content = {
            tabs: [
                { id: 1, label: "myTab1" },
                { id: 2, label: "myTab2" }
            ]
        };
    });

在您的视图中(但不是标题)

如果您必须在信息中心页面上创建标签,则可以将标签放入主要内容区域(但不在标题的顶部)。

<强> view.html

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        Tab 1 content
    </div>
    <div class="tab-pane" id="tab2">
        Tab 2 content
    </div>
</div>

然后,您可以使用ng-repeat(等)在Angular中控制这些标签。