javascript - angular-ui-routing 不会改变 View

Question

我在 ionic 和 ui 路由方面遇到问题，当我进入子状态时，url 已更新但 View 保持不变。

这是我的 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 时， View 没有改变，即使我直接去那里并在浏览器中插入正确的 url 也是如此。我也尝试过 ui-sref-opts="{reload: true} 选项但没有任何改变。

这是一个显示问题的插件(搜索后 View 没有改变)https://plnkr.co/edit/JrNFkV50klZItOQS18Iu

Answer 1

我没有使用 Ionic 的经验，但基于 ui-router 配置，angular 需要一个嵌套 View ，但您的页面只有一个 View 。意思是，第二级(产品)没有要加载的 View 。因为 Ionic 我想不允许嵌套的 ionic View (如果允许的话会很有趣)你可以使用普通的 ui-view 作为嵌套 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，您似乎不小心定义了嵌套 View 。在这种情况下，解决方案是从 *.product 状态名称中删除 .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"
                }
            }
        });