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

Question

I'm using angular1 version of winjs split view win-split-view having four menu commands (1) categories (2) products (3) vendors (4) agents.

Currently the content view shows all the four directives. But I want to show only one directive based on the command being selected.

How can I dynamically inject the directive in win-split-view-content?

I'm not looking for a solution using 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

I think you should use templates instead of directives for your concern. If you define those four as templates, you can switch between states using routing.

<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>

Your templates could be something like this one:

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

Now all you have to do in your controller, is to switch state, e.g.:

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