Question

我正在使用具有四个菜单命令（1）类别（2）的 winjs拆分视图 win-split-view 的 angular1 版本产品（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中的内容？

1 个答案: