Как предотвратить перезагрузку именованного вида при изменении состояния? Угловой интерфейс AngularJS

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

Рассмотрим следующее:

$urlRouterProvider.otherwise('/person/list');

$stateProvider
    .state('person', {
        url: '/person',
        abstract: true,
    })
    .state('person.list', {
        url: '/list',
        views: {
            "[email protected]": {
                templateUrl: "person.list.html",
                controller: 'PersonListController'
            }
        }
    })
    .state('person.details', {
        url: '/{id}',
        views: {
            '[email protected]': {
                templateUrl: "person.details.html",
                controller: 'PersonController'
            },
            '[email protected]': {
                templateUrl: "person.nav.html",
                controller: 'PersonNavController'
            }
        }
    });

Когда пользователи впервые посещают приложение, им предоставляется список людей. Когда они нажимают на человека, они попадают на страницу сведений. Довольно простой материал. Здесь разметка, если она помогает...

<div>
    <aside ui-view="nav"></aside>
    <div ui-view="main"></div>
</div>

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

Есть ли способ сохранить вид '[email protected]' загружен и обновить только '[email protected]'?

Ответы

Ответ 1

Способ, которым я использую ui-router в следующих сценариях: переместить представления в наименьший общий знаменатель.

Другие слова: В случае, если ui-view="nav" разделяется между всеми деталями и одинаково для всех из них (потому что он должен быть загружен только один раз) - он должен быть частью состояния list (родительский элемент detail)

определение родительского состояния будет скорректировано следующим образом:

.state('person.list', {
    url: '/list',
    views: {
        "[email protected]": {
            templateUrl: "person.list.html",
            controller: 'PersonListController'
        }
        // here we target the person.list.html
        // and its ui-view="nav"
        '[email protected]': {
            templateUrl: "person.nav.html",
            controller: 'PersonNavController'
        }
    }

Итак, где трюк? В силе angular ui-router. Мы можем, во время каждой проверки состояния, нацелиться на текущее представление. Теперь представление nav является частью определения состояния list, то есть оно не будет перезагружено во время детализации (также проверьте здесь для более подробного объяснения)

Мы просто должны использовать определенные соглашения об именах, см.

Несколько цитированных строк из указанной документации:

views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "[email protected]" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "[email protected]" : { }