угловой материал Динамический mdTabs и ui-router с именем и состояниями

Question

В настоящее время я работаю над проектом с требованием динамических вкладок. Для этого я использую вкладки угловых материалов, а также использую состояние ui-router и названную концепцию представления для динамического загрузки содержимого вкладок.

Для .: например

<!-- mdTabs --> 
    <md-tabs md-autoselect> 

    <!-- mdTab --> 
    <md-tab ng-repeat="tab in home.tabs" label="{{tab.title}}" md-on-select="home.selectTab(tab)"> 

     <md-tab-body> 
     <div ui-view="{{tab.viewName}}"></div> 
     </md-tab-body> 
    </md-tab> 

    </md-tabs> 

Вкладки добавлены как:

vm.tabs = [{ 
     title: 'Tab-A', 
     state: 'mainState.tabStateA', 
     viewName: 'tabA' 
    }, { 
    title: 'Tab-B', 
    state: 'mainState.tabStateB', 
    viewName: 'tabB' 
    }]; 

Вы посмотрите на эту CodePen для примера реализации может.

Справочная информация: Всякий раз, когда я меняю вкладки, я меняю состояние и загружаю содержимое. Это состояние может дополнительно содержать другие n-уровни вложенных состояний, которые также могут быть загружены динамически; Вкладки можно добавлять или удалять динамически.

Проблема: мое приложение может иметь теоретически неограниченные вкладки, и проблема в том, что всякий раз, когда я переключаю вкладки, все содержимое загружается снова и снова, что ухудшает UX, поскольку вкладки могут быть в любом из возможных состояний (пользовательский интерфейс может меняться основанный на вложенном уровне контента).

Вопрос: Можем ли мы что-то сделать, поскольку вкладка загружается после ее кэширования, и поэтому всякий раз, когда мы возвращаемся к тому же состоянию, он не должен снова загружаться. И, если в будущем вкладка должна быть загружена снова, мы также можем предложить некоторую логику для этого. Я знаю, что у кого-то, должно быть, была аналогичная проблема, и я просто из любопытства задаю этот вопрос.

Answer 1

ли еще некоторое исследование и выяснили, что есть ui-router-extras, который обеспечивает некоторую дополнительную поддержку как StickyStates ака ParallelStates, Deep State Redirect и т.д. Для получения дополнительной информации посмотрите на ui-router extras.

Для меня это был тупик, так как вышеупомянутая поддержка библиотеки присутствует для angular-ui-router ~0.2.8, и в настоящее время я использую следующую версию angular-ui-router i.e. 1.0.0-rc.1. Итак, я связался с разработчиком (огромный крик до Chris Thielen) и получил обновление, которое было выполнено для Sticky States для ui-router rc-1.0.0. Для получения дополнительной информации смотрите на update.

Так что, в основном, я отвечаю на свой вопрос. И ответ заключается в использовании ui-router-extras, если вы находитесь в старой версии ui-router или используете ui-router 1.0.0-rc.1 вместе с Sticky States.

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