Angularjs：如何使用 $state.go() 对相同状态的视图进行重定向？

Question

在我的应用程序的 $stateProvider 上，我定义了应用程序的所有状态：

+ 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);
}();

来自 login controller ===> $state.go('layout') 工作并重定向到 layout.html.....符合预期。

From layout.html ===> <ui-view ='list'/> 在 layout状态。

来自列表控制器===> $state.go('form')或$state.go('edit')，不起作用。在 list.html <a ui-sref='form'/> 中不起作用。

如何在不同的视图及其控制器之间重定向？

Answer 1

你不能做 $state.go('form') 因为你没有在 $stateProvider

中定义那个状态

如果你想在状态之间导航，你必须像这样打破它：

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

Answer 2

最后我发现在我的案例中没有必要使用视图。我可以使用 parents por display 和 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');
    }

并且在 layout.html 中仅适用：<ui-view></ui-view>。当需要从布局中引用另一个状态时：例如 $state.go('layout.form')..

Angularjs：如何使用 $state.go() 对相同状态的视图进行重定向？

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

angularjs

angular-ui-router

viewstate

ui-sref

state.go