Angularjs: How to use $state.go() for redirect on views of the same state?

1
votes

On the $stateProvider of my app, I define all of the app's states:

+ function () {
"use strict";

function cataneiConfig($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html',
            controller: 'loginCtrl as $ctrl'
        })
        .state('layout', {
            url: '/layout',
            views:{
                '':{//Default layout
                    templateUrl: 'views/layout.html',
                    controller: 'layoutCtrl as $ctrl'
                },
                'list@layout':{
                    templateUrl: 'views/list.html',
                    controller: 'listPersonaCtrl as $ctrl'
                },
                'form@layout': {
                    templateUrl: 'views/form.html',
                    controller:'createPersonaCtrl as $ctrl'
                },
                'edit@layout':{
                    params: { obj: null },
                    templateUrl: 'views/edit.html',
                    controller:'editPersonaCtrl as $ctrl'
                }
            },
        })   
        .state('error', {
            url: '/error',
            templateUrl: 'views/error.html'
        });
    $urlRouterProvider.otherwise('login');
}
cataneiConfig.$inject = [
    "$stateProvider",
    "$urlRouterProvider",
    "$httpProvider",
];
angular
    .module("appTareas")
    .config(cataneiConfig);
}();

From login controller ===> $state.go('layout') works and redirects to layout.html....as expected.

From layout.html ===> <ui-view ='list'/> properly displays list.html within the layout state.

From list controller ===> $state.go('form') or $state.go('edit'), does not work. In list.html <a ui-sref='form'/> doesn't work.

How can I redirect between the different views & their controllers?

2
angularjsangular-ui-routerviewstateui-srefstate.go
I'm assuming you have already looked through this, but if not, here is a sample app doing what you are trying to achieve - Tyler
@Tyler Yes, but they used different logic. They use advanced components and i only need a simple way in the $stateProvider and the use of $state if is possible - Dr oscar

2 Answers

0
votes

You can't do $state.go('form') because you didn't define that state in the $stateProvider

If you want to navigate between states you'll have to break it out like so:

$stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html',
            controller: 'loginCtrl as $ctrl'
        })
        .state('layout', {
            url: '/layout',
            views:{
                '':{//Default layout
                    templateUrl: 'views/layout.html',
                    controller: 'layoutCtrl as $ctrl'
                },
                'list@layout':{
                    templateUrl: 'views/list.html',
                    controller: 'listPersonaCtrl as $ctrl'
                },
                'edit@layout':{
                    params: { obj: null },
                    templateUrl: 'views/edit.html',
                    controller:'editPersonaCtrl as $ctrl'
                }
            },
        })
        .state('form', {
            url: '/form',
            templateUrl: 'views/form.html',
            controller: 'createPersonaCtrl as $ctrl'
        })  
        .state('error', {
            url: '/error',
            templateUrl: 'views/error.html'
        });
0
votes

Finally i see isn't necessary use views in my case. I can use layout with another states using parents por display and direct:

$stateProvider
            .state('login', {
                url: '/login',
                templateUrl: 'views/login.html',
                controller: 'loginCtrl as $ctrl'
            })
            .state('layout', {
                url: '/',
                templateUrl: 'views/layout.html',
                controller: 'layoutCtrl as $ctrl'
            })
            .state('layout.list', {
                url: '/list',
                templateUrl: 'views/list.html',
                controller: 'listPersonaCtrl as $ctrl'
            })
            .state('layout.form', {
                url: '/form',
                templateUrl: 'views/form.html',
                controller: 'formPersonaCtrl as $ctrl'
            })
            .state('error', {
                url: '/error',
                templateUrl: 'views/error.html'
            });
        $urlRouterProvider.otherwise('login');
    }

And in layout.html only apply: <ui-view></ui-view>. When need refer another state from layout: $state.go('layout.form') for example..