Question

在我的用例中有三个，因为缺少一个更好的词，＆＃34; views＆＃34;。第三个视图中显示的内容取决于在第二个和第一个视图中所做的选择。同样，第二个视图中显示的子主题取决于在第一个视图中进行的选择。

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         |                 |

目前，当用户选择主题时，我会获得并显示子主题列表。一旦用户选择了一个子主题，我就会获得并显示内容。到目前为止，这么好。

唯一的问题是，我还希望用户能够通过导航到表单的网址来访问它：

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

我有这样的工作，导航到url会导致加载所有正确的内容。那不是问题。

我的问题是，如果用户选择新主题或子主题，我想更改网址。但是没有导致页面重新加载（如果我使用location.path似乎会发生这种情况。我该怎么做？

Answer 1

您不应该使用窗口的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: '/'
        });
}

你可以实现你想要的！

另请参阅此 short demo 。

Answer 2

据我所知，实现这一目标的唯一方法是使用ui-router。

使用ngrouter，你必须更改查询字符串参数的参数，所以它会像：

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

然后在您的路线配置中：

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

然后你会在控制器上监听路由的变化（$ routeChangeSuccess）并从那里获取查询字符串。

多个视图和更改网址

2 个答案: