Блог

В моем варианте использования есть три, за неимением лучшего слова, «представления». Содержимое, отображаемое в третьем представлении, зависит от выбора, сделанного во втором и первом представлении. Аналогично, подтемы, отображаемые во втором представлении, зависят от выбора, сделанного в первом представлении.

 Select Topic | Select Subtopic | Display Content
------------------------------------------------------
Vegetables   | Apple           | The peach is a tasty
FRUITS*      | Banana          | fruit that has a nice
Meats        | PEACH*          | color, etc.
Fish         |                 |
  

В настоящее время, когда пользователь выбирает тему, я получаю и отображаю список подтем. Как только пользователь выбирает подтему, я затем получаю и отображаю содержимое. Пока все идет хорошо.

Единственная проблема, я также хочу, чтобы пользователь мог получить к этому доступ, перейдя по URL-адресу формы:

 example.com/index.html#/topic/subtopic
  

У меня это работает таким образом, что переход по URL-адресу приводит к загрузке всего нужного содержимого. Проблема не в этом.

Моя проблема в том, что я хочу изменить URL-адрес, если пользователь выбирает новую тему или подтему. Но без перезагрузки страницы (что, похоже, происходит, если я использую location.path . Как мне это сделать?

Вы должны использовать не window’s location.path , а маршрутизацию Angular (либо через $location.path() , либо неявно изменяя #hash).

С такими представлениями:

 <!-- Categories -->
<script type="text/ng-template" id="partials/categories.tmpl.html">
    <h3>Select a food category:</h3>
    <ul>
        <li ng-repeat="category in categories">
            <a ng-href="#/{{category.path}}">{{category.label}}</a>
        </li>
    </ul>
</script>

<!-- Fruits -->
<script type="text/ng-template" id="partials/fruits.tmpl.html">
    <h3>Select a fruit:</h3>
    <ul>
        <li ng-repeat="fruit in fruits">
            <a ng-href="#/fruits/{{fruit.path}}">{{fruit.label}}</a>
        </li>
    </ul>
    <a ng-href="#/{{back}}">Back</a>
</script>

<!-- Meats --->
...

<!-- Vegetables -->
...

<!-- Description -->
<script type="text/ng-template" id="partials/description.tmpl.html">
    <h3>{{item}}</h3>
    <p>{{description}}</p>
    <a ng-href="#/{{back}}">Back</a>
</script>
  

соответствующие контроллеры и службы и конфигурация, подобная этой:

 function config($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'partials/categories.tmpl.html',
            controller:  'categoriesCtrl'
        }).
        when('/fruits/:fruit?', {
            templateUrl: function (params) {
                return params.fruit ?
                        'partials/description.tmpl.html' : 
                        'partials/fruits.tmpl.html';
            },
            controller:  'fruitsCtrl'
        }).
        when('/meats/:meat?', {...}).
        when('/vegetables/:vegetable?', {...}).
        otherwise({
            redirectTo: '/'
        });
}
  

вы можете добиться того, чего хотите!

Смотрите также эту короткую демонстрацию.

Насколько я знаю, единственный способ добиться именно этого — использовать ui-router.

С помощью ngrouter вам нужно изменить свои параметры для параметров строки запроса, чтобы это было похоже:

 example.com/index.html#/myRoute?topic=topicamp;subtopic=subtopic
  

А затем в вашей конфигурации маршрутов:

 when('/myRoute', { templateUrl: ..., reloadOnSearch: false })
  

Затем вы должны прослушать изменения в маршруте ($routeChangeSuccess) на контроллере и получить оттуда строку запроса.