Question

我的路线定义如下：

        $stateProvider
          .state('vehicles', {
            url: '/vehicles',
            templateUrl: 'foo/bar1.html'
        }).state('vehicles.id', {
            url: '/{id}',
            templateUrl: 'foo/bar3.html'
        }).state('vehicles.create', {
            url: '/create',
            templateUrl: 'foo/bar2.html',
            controller: 'VehicleCreateController'
        });

我有一个按钮

$state.go("vehicles.create");

问题是，当网址正确更改时，页面保持不变。只有在第二次点击后，才会显示正确的模板。

Answer 1

在我的同事提示后，我意识到，导致问题的是州定义。 将状态重新排序从“更具体”（URL-wise - 即/ create）转向不太具体（/ {id}）的做法。所以错误的是在非常相似的情况下使用更通用的URL / vehicles / {id}，但不那么通用的/ vehicles / create。

所以这是改进版本：

        $stateProvider
          .state('vehicles', {
            url: '/vehicles',
            templateUrl: 'foo/bar1.html'
        }).state('vehicles.create', {
            url: '/create',
            templateUrl: 'foo/bar2.html',
            controller: 'VehicleCreateController'
        }).state('vehicles.id', {
            url: '/{id}',
            templateUrl: 'foo/bar3.html'
        });

Answer 2

使用：表示你的参数和？，以便在需要时选择这些参数。

检查以下代码段，以便使用参数进行路由。

$stateProvider
.state('contacts.detail', {
    url: "/contacts/:contactId",
    templateUrl: 'contacts.detail.html',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/42
        expect($stateParams).toBe({contactId: "42"});
    }
})

check this for more clear view on routing.

导航到Angular UI路由器状态的问题

2 个答案: