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

【问题标题】：Angularjs: How to use $state.go() for redirect on views of the same state?Angularjs：如何使用 $state.go() 重定向相同状态的视图？
【发布时间】：2018-10-11 22:21:32
【问题描述】：

在我的应用程序的 $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 控制器 ===> $state.go('layout') 工作并重定向到 layout.html... .如预期的那样。

来自 layout.html ===> <ui-view ='list'/> 在 layout 状态下正确显示 list.html。

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

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

【问题讨论】：

我假设你已经看过这个，但如果没有，here is a sample app doing what you are trying to achieve
@Tyler 是的，但他们使用了不同的逻辑。他们使用高级组件，我只需要在 $stateProvider 中使用简单的方法，并且如果可能的话使用 $state

标签： angularjs angular-ui-router viewstate ui-sref state.go

【解决方案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'
        });

【讨论】：

情况是我需要保存布局，但是当在列表控制器或list.html重定向到表单时，我需要layout.html显示form.html ...这种方式就像重定向内部布局.html 但从他的观点中调用状态

【解决方案2】：

最后我发现在我的情况下没有必要使用视图。我可以使用父母 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')..

【讨论】：

仅供参考。如果您包含 html，我可以为您节省两个小时，以便我意识到您需要 parent 属性。