CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerstate
Doc
Doc

Reputation: 43

angular-ui-routing doesn't change the view

I have a problem with ionic and ui-routing, when I go in a child state the url is updated but the view remains the same.

this is my 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');
});

in this example when I try to go in app.search.product the view doesn't change, even if I go there directly inserting the right url in the browser. I've also tryed with ui-sref-opts="{reload: true} option but nothing change.

Here's a plunker that shows the problem (after search the view doesn't change) https://plnkr.co/edit/JrNFkV50klZItOQS18Iu

Upvotes: 3

Views: 719

Answers (3)

Miroslav Jonas
Miroslav Jonas

Reputation: 6657

I don't have experience with Ionic, but based on the ui-router config angular expects a nested view, but your page has only single view. Meaning, the second level (product) has no view to load into. Since Ionic I suppose doesn't allow nested ionic views (would be funny if it did) you can use normal ui-view as nested one. 

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

Check your code with modifications here: https://plnkr.co/edit/LdgmoAEo1pS9spi1Su1z.

Not sure if this is what you were looking for. Based on your plunkr it looks like you've defined nested view accidentally. In which case solution would be to remove .search from *.product state names: 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"
                }
            }
        });

Upvotes: 2

Gonzalo Pincheira Arancibia
Gonzalo Pincheira Arancibia

Reputation: 3623

Use this configuration:

   $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"
                }
            }
        });

When you declare 'app.search.product' by example, this means that in the template of the search state (search.html) should be have a view for load the children state, and this it's not the case, your views has been moving in the same "level"

Upvotes: 2

Abhishek Kadam
Abhishek Kadam

Reputation: 57

try to put in ui-sref name of the product state in Go To product link tag. that is ui-sref="app.product"

Upvotes: 0

Related Questions