Как динамически заменить контент в Angular-WinJS win-split-view-pane?

Question

Как динамически заменить контент в Angular-WinJS win-split-view-pane?

0

Я использую 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>

wonderful world 06 дек. 2015, в 18:46

Источник

0

вы всегда можете динамически внедрить элементы с помощью ng-if или, если вы этого не хотите, просто отрендерите его, используя $ compile ... добавьте строку html в код ...
Jony-Y 06 дек. 2015, в 18:40

Теги:

angularjs

winjs

1 ответ

Ещё вопросы

вы всегда можете динамически внедрить элементы с помощью ng-if или, если вы этого не хотите, просто отрендерите его, используя $ compile ... добавьте строку html в код ...

silkimen · Accepted Answer · 2016-01-01T22-15-00.000Z

Я думаю, вы должны использовать шаблоны вместо директив для своей заботы. Если вы определяете эти четыре в качестве шаблонов, вы можете переключаться между состояниями с помощью маршрутизации.

<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');
    };
)};