Reload View on change url

Question

I'm using angularjs with ui-router (with the helper stateHelperProvider) to collect views and controllers into the page.

But got a problem with my views not updating.

My code (the one that is related)

config.js

app.config(function($httpProvider, $urlRouterProvider, RestangularProvider, stateHelperProvider) {

    $urlRouterProvider.otherwise("/");

    stateHelperProvider
        .state({
            name: 'division',
            url: '/division/:division',
            views: {
                'main': {
                    templateUrl: '/templates/division.main?uri=' + segment(2),
                    controller: 'DivisionController'
                }
            },
            children: [
                {
                    name: 'appcontent',
                    url: '/content',
                    views: {
                        'content': {
                            templateUrl: "templates/division.appcontent?uri=" + segment(2) + '&root=' + segment(4),
                            controller: 'AppContentController'
                        }
                    },
                    children: [
                        {
                            name: 'root',
                            url: '/:root',
                            views: {
                                'roots': {
                                    templateUrl: "templates/division.appcontent.roots?uri=" + segment(2) + '&root=' + segment(4)
                                }
                            }
                        }
                    ]
                }
            ]
        });
});

the code I use for linking

// linking to another division
<a ui-sref="division.appcontent({division: 'test2')">test2</a>

// linking to another root
<a ui-sref="division.appcontent.root({division: 'test2', root: 'test')">test2</a>

Explaining

But got a problem with my views not updating.

My views are the one with the actual data, so I need them to reload on change.

Like when :division in url is test1, then the template template/division.main have one set of data. But when :division in url is test2, then the template template/division.main have another set of data.

So whenever :division in url changes, I need to reload the template template/division.main and as well all the child templates.

But when :root changes in the url, I only need to reload the template template/division.appcontent.roots and not the template/division.main template.

Is this possible somehow or should I change to use only an API in order to get data.

I really hope this makes sense.

Note

segment is a function I have made to get some data from the angular route.

this may help http://stackoverflow.com/questions/27662818/angularjs-ui-router-reloadtrue-also-reloads-parent-state — ps0604, Jan 09 '15 at 15:53
This doesn't fix my problem. This uses Javascript in order to change the content inside the view. My view is based on PHP which makes it impossible to get the right data without reloading the view or creating an API to get data through. Thanks anyways. — Mark Topper, Jan 09 '15 at 16:31
According to http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider, templateUrl can be a function which is passed the current state params... `templateUrl: function(params) { return myTemplates[params.pageId]; }` — Chris T, Jan 09 '15 at 22:08

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Thanks to the comment from @ChrisT I managed to get it to work using templateUrl as a fucnction.

My new config.js:

app.config(function($httpProvider, $urlRouterProvider, RestangularProvider, stateHelperProvider) {

    $urlRouterProvider.otherwise("/");

    stateHelperProvider
        .state({
            name: 'division',
            url: '/division/:division',
            views: {
                'main': {
                    templateUrl: function(params) {
                            return '/templates/division.main?uri=' + params.division;
                    },
                    controller: 'DivisionController'
                }
            },
            children: [
                {
                    name: 'appcontent',
                    url: '/content',
                    views: {
                        'content': {
                            templateUrl: function(params) {
                                return 'templates/division.appcontent?uri=' + params.division + '&root=';
                            },
                            controller: 'AppContentController'
                        }
                    },
                    children: [
                        {
                            name: 'root',
                            url: '/:root',
                            views: {
                                'roots': {
                                    templateUrl: function(params) {
                                        return 'templates/division.appcontent.roots?uri=" + params.division + '&root=' + params.root;
                                    }
                                }
                            }
                        }
                    ]
                }
            ]
        });
});

Reload View on change url

My code (the one that is related)

Explaining

Note

1 Answers1