Состояния Angular UI Router

Question

Состояния Angular UI Router

0

У меня два состояния. Одно состояние - это таблица с доменами, а второе состояние - информация о домене. В таблице есть фильтры (выпадающие списки, выпадающие флажки), которые могут применяться к данным таблицы. Вы можете щелкнуть в домене из таблицы, которая запускает второе состояние (state1.domain).

Мой вопрос заключается в том, когда я нажимаю кнопку state1 в state1.domain, а затем нажимаю back to state1, как я могу сохранить отфильтрованные данные, а не повторно инициализировать контроллер? В настоящее время, когда я перехожу к состоянию1, мои фильтры были очищены, а также данные таблицы.

$stateProvider
.state ('state1', {
    url: '/state1',
    views: {
        "main@": {
            controller: 'StateOneCtrl',
            templateUrl: 'folder/state1.tpl.html'
        }
    },
    ncyBreadcrumb: { label: 'State One' },
    data: { pageTitle: 'State One', showTitle: false}
})
.state('state1.domain', {
    url: '/:domain',
    views: {
        "main@": {
            controller: 'StateOneDomainCtrl',
            templateUrl: 'folder/state1-domain.tpl.html'
        }
    },
    ncyBreadcrumb: { label: '{{domain}}' },
    data: { pageTitle: 'State One Domain', showTitle: false }
})

ibtjw 23 июль 2015, в 16:44

Источник

0

Его немного подобно тому, как это один stackoverflow.com/questions/31542972/... только вы используете data опции состояния , и я использую params
Pankaj Parkar 23 июль 2015, в 14:30
0

Извините, я забыл упомянуть, что использую хлебные крошки, чтобы вернуться назад.
user1649800 23 июль 2015, в 14:36
0

в любом случае эти значения не сохраняются в ui-router , вам нужно поддерживать в сервисе / фабрике
Pankaj Parkar 23 июль 2015, в 14:38
0

@PankajParkar Да, сервис / фабрика - это еще один действительно хороший вариант, о котором я забыл упомянуть.
Okazari 23 июль 2015, в 14:40
0

@Okazari да, я знаю .. Я упоминал об этом в своем вопросе .. Я собираюсь назначить награду за мой вопрос через 27 минут .. Я хочу по-другому.
Pankaj Parkar 23 июль 2015, в 14:42
0

Просто нашел этот github.com/angular-ui/ui-router/issues/1158 об атрибуте «notify», который можно установить в false, чтобы предотвратить события (такие как перезагрузка контроллера), но на самом деле он не работает (ошибка).
Okazari 23 июль 2015, в 15:14
0

Спасибо, сейчас я просто взломаю службу там.
user1649800 23 июль 2015, в 15:39

Показать ещё 5 комментариев

Теги:

angularjs

angular-ui-router

1 ответ

Ещё вопросы

Его немного подобно тому, как это один stackoverflow.com/questions/31542972/... только вы используете data опции состояния , и я использую params
Извините, я забыл упомянуть, что использую хлебные крошки, чтобы вернуться назад.
в любом случае эти значения не сохраняются в ui-router , вам нужно поддерживать в сервисе / фабрике
@PankajParkar Да, сервис / фабрика - это еще один действительно хороший вариант, о котором я забыл упомянуть.
@Okazari да, я знаю .. Я упоминал об этом в своем вопросе .. Я собираюсь назначить награду за мой вопрос через 27 минут .. Я хочу по-другому.
Просто нашел этот github.com/angular-ui/ui-router/issues/1158 об атрибуте «notify», который можно установить в false, чтобы предотвратить события (такие как перезагрузка контроллера), но на самом деле он не работает (ошибка).
Спасибо, сейчас я просто взломаю службу там.

Okazari · Accepted Answer · 2015-07-23T12-40-00.000Z

Использование сервисов

Вы можете сохранить эти значения в службе. При инициализации вашего контроллера вы просто настроите контроллеры var с сохраненным var в службе.

Может быть лучшим решением.

Использование хранилища сеансов

На мой взгляд, один из способов - использовать хранилище сеансов для хранения фильтров в потоке навигации в ваше приложение.

В контроллере вы запустите фильтры vars следующим образом:

$scope.filterName = sessionStorage.filterName

При каждом изменении фильтра вы сохраняете значение sessionStorage

//In your HTML on the filter
ng-change="onFilterNameChange()"

//In your JS
$scope.onFilterNameChange = function(){
    sessionStorage.filterName = $scope.filterName
}

И это почти все.

Если вы хотите "очистить" фильтры, вы также можете сделать это, вы можете управлять необязательным параметром url (например, resetFilters = true), который очищает фильтры.

Использование параметров запроса

Вы также можете (если не так много фильтров) явно задает фильтры в URL-адресе, как это

.state ('state1', {
    url: '/state1?filter1&filter2&filter3',
    views: {
        "main@": {
            controller: 'StateOneCtrl',
            templateUrl: 'folder/state1.tpl.html'
        }
    },
    ncyBreadcrumb: { label: 'State One' },
    data: { pageTitle: 'State One', showTitle: false}
})

Но вы можете застрять, поскольку вы не можете указать объект URL (тогда как вы можете подстроить его для своего сеанса.

Надеюсь, это помогло.

Что делать, если есть 10 параметров фильтра? это будет хорошее решение, чтобы передать его через URL?
@PankajParkar Зависит от вкусов. Я бы предпочел не указывать 10 фильтров в своем URL (тогда как Google в значительной степени предоставляет всю информацию в URL). Если бы у меня было столько фильтров, я бы выбрал решение sessionStorage.
локальное хранилище может быть одним из способов справиться с этим. Я также рассматривал возможность использования службы для хранения состояния фильтров, когда пользователь перемещался между состояниями, поскольку моя самая большая проблема заключается в том, что контроллер повторно инициализирует себя, когда пользователь щелкает обратно в состояние1.
@ibtjw На мой взгляд, sessionStorage (не localStorage) - это путь. Но сервис действительно очень хороший вариант, если не лучше.
Правильно, сессионное хранилище не локальное хранилище. :)
Вам нужен пример о способе обслуживания или это хорошо для вас, если я просто упомяну это?
Я уже начал писать сервис, спасибо. :) Просто странно, что в ui-router нет какого-либо механизма, который бы удерживал вас, если вы щелкнете по кнопке или сохраните состояние контроллеров.
@ibtjw Не осознавал этого раньше, но вы оба правы. Может быть, мы должны поспорить немного больше на эту тему github.com/angular-ui/ui-router/issues/2115
@Okazari Если вы добавите какой-либо комментарий к этой теме, это поможет другим, кто сталкивается с этой проблемой ... Я так не думаю, что это проблема реализации.
@ibtjw, если вы немного больше беспокоитесь о проблеме, вы также можете добавить комментарий .. Я уже обновил свою проблему, добавив и ваш вопрос ..