如何动态替换Angular-WinJS win-split-view-pane中的内容？

Question

我正在使用 angular1 版本的 winjs split view win-split-view有四个菜单命令 (1) 类别 (2) 产品 (3) 供应商 (4) 代理商。

当前内容视图显示所有四个指令。但我只想根据所选命令显示一个指令。

如何在 win-split-view-content 中动态注入指令？

我不是在寻找使用 ngShow 的解决方案。

<div id="home">
    <div style="display: flex; align-items: center;">
        <win-split-view-pane-toggle split-view="splitViewElement"></win-split-view-pane-toggle>
    </div>
    <win-split-view id="splitView" opened-display-mode="'inline'">
        <win-split-view-pane>
            <win-split-view-command label="'Categories'" icon="''" on-invoked="goToCategories()"></win-split-view-command>
            <win-split-view-command label="'Products'" icon="''" on-invoked="goToProducts()"></win-split-view-command>
            <win-split-view-command label="'Vendors'" icon="''" on-invoked="goToVendors()"></win-split-view-command>
            <win-split-view-command label="'Agents'" icon="''" on-invoked="goToAgents()"></win-split-view-command>
        </win-split-view-pane>
        <win-split-view-content>
            <categories></categories>
            <products></products>
            <vendors></vendors>
            <agents></agents>
        </win-split-view-content>
    </win-split-view>
</div>

Answer 1

我认为您应该使用模板而不是指令来解决您的问题。如果将这四个定义为模板，则可以使用路由在状态之间切换。

<div id="home">
    <div style="display: flex; align-items: center;">
        <win-split-view-pane-toggle split-view="splitViewElement"></win-split-view-pane-toggle>
    </div>
    <win-split-view id="splitView" opened-display-mode="'inline'">
        <win-split-view-pane>
            <win-split-view-command label="'Categories'" icon="''" on-invoked="goToCategories()"></win-split-view-command>
            <win-split-view-command label="'Products'" icon="''" on-invoked="goToProducts()"></win-split-view-command>
            <win-split-view-command label="'Vendors'" icon="''" on-invoked="goToVendors()"></win-split-view-command>
            <win-split-view-command label="'Agents'" icon="''" on-invoked="goToAgents()"></win-split-view-command>
        </win-split-view-pane>
        <win-split-view-content>
            <ui-view>
            <!-- templates are rendered here -->
            </ui-view>
        </win-split-view-content>
    </win-split-view>
</div>

您的模板可能是这样的：

   <script type="text/ng-template" id="/categories.html">
   <!-- content of categories -->
   </script>

现在您在控制器中所要做的就是切换状态，例如：

yourApp.controller('yourController', function($scope, $state) {
    $scope.goToCategories = function() {
        $state.go('categories');
    };
)};

如何动态替换Angular-WinJS win-split-view-pane中的内容？

How to dynamically replace content in Angular-WinJS win-split-view-pane?

winjs

angularjs