Question

我对离子和ui路由有问题，当我进入子状态时，url会更新，但视图保持不变。

这是我的routing.js

.config(function($stateProvider, $urlRouterProvider, $locationProvider, $ionicConfigProvider) {

    $ionicConfigProvider.views.maxCache(0);

    $stateProvider

        .state('app', {
            url: "/",
            abstract: true,
            templateUrl: "menu.html",
            controller: "menuCtrl"
        })

        .state('app.home', {
            url: "home",
            cache: false,
            views: {
                'menuContent': {
                    templateUrl: "home.html",
                    controller: "homeCtrl"
                }
            }
        })

        .state('app.search', {
            url: "search",
            views: {
                'menuContent': {
                    templateUrl: "search.html",
                    controller: "searchCtrl"
                }
            }
        })

        .state('app.search.product', {
            url: "/product/:id",
            views: {
                'menuContent': {
                    templateUrl: "productPage.html",
                    controller: "singleProductCtrl"
                }
            }
        })

        .state('app.search.product.market', {
            url: "/product/:id",
            views: {
                'menuContent': {
                    templateUrl: "market.html",,
                    controller: "marketCtrl'
                }
            }
        });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/home');
});

在这个例子中，当我尝试进入app.search.product时，即使我直接在浏览器中插入正确的URL，视图也不会改变。我也尝试过使用ui-sref-opts =＆＃34; {reload：true}选项，但没有任何改变。

这是一个显示问题的搜索者（搜索后视图无法更改）https://plnkr.co/edit/JrNFkV50klZItOQS18Iu

Answer 1

使用此配置：

   $stateProvider

        .state('app', {
            url: "/",
            abstract: true,
            templateUrl: "menu.html",
        })

        .state('app.home', {
            url: "home",
            views: {
                'menuContent': {
                    templateUrl: "home.html"
                }
            }
        })

        .state('app.search', {
            url: "search",
            views: {
                'menuContent': {
                    templateUrl: "search.html"
                }
            }
        })

        .state('app.product', {
            url: "/product/:id",
            views: {
                'menuContent': {
                    templateUrl: "productPage.html"
                }
            }
        })

        .state('app.market', {
            url: "/product/:id",
            views: {
                'menuContent': {
                    templateUrl: "market.html"
                }
            }
        });

当您通过示例声明'app.search.product'时，这意味着在搜索状态的模板（search.html）中应该有一个视图来加载子状态，而事实并非如此，观点一直在同一“水平”

Answer 2

我没有Ionic的经验，但基于ui-router config angular需要嵌套视图，但您的页面只有单一视图。意思是，第二级（产品）无法加载。因为Ionic我认为不允许嵌套的离子视图（如果有的话会很有趣）你可以使用普通的ui-view作为嵌套的视图。

<ion-view view-title="Search">
<ion-content>
    <h1>Search</h1>
    <a ui-sref=".product({id: 1})">Go to product</a>
    <ui-view name="secondLevel"></ui-view>
</ion-content>

在此处检查您的代码并进行修改：https://plnkr.co/edit/LdgmoAEo1pS9spi1Su1z。

不确定这是否是您要找的。基于你的plunkr，你看起来像是意外地定义了嵌套视图。在这种情况下，解决方案是从 *。产品州名称中删除 .search ：https://plnkr.co/edit/PGICsBhzyCOTSe9af4yu

        .state('app.product', {
            url: "/product/:id",
            views: {
                'menuContent': {
                    templateUrl: "productPage.html"
                }
            }
        })

        .state('app.market', {
            url: "/product/:id",
            views: {
                'menuContent': {
                    templateUrl: "market.html"
                }
            }
        });

Answer 3

尝试在Go To product链接标记中输入产品状态的ui-sref名称。那是ui-sref =“app.product”

angular-ui-routing不会改变视图

3 个答案: