angularjs - 从子状态到另一个拥有自己控制器的子状态的 ui-router 路由答案

【问题标题】：angularjs - ui-router route from child state to another child state that has own controllerangularjs - 从子状态到另一个拥有自己控制器的子状态的 ui-router 路由
【发布时间】：2016-06-20 13:54:23
【问题描述】：

我在这里遇到了 ui-router 的问题，这是我第一次使用它，即使使用文档我也有点乱。问题是我的应用程序状态像这样，带有自定义控制器：

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        // App routing
        .state('form', {
            url: '/',
            templateUrl: 'formBase.html',
            controller: 'formController',
        })

        .state('form.profile', {
            url: '/profile',
            templateUrl: 'modules/about/about.view.html'
        })

        .state('form.movie', {
            url: '/movie',
            templateUrl: 'modules/movie/movie.view.html',
            controller: 'MovieController as vm'
        })

        .state('form.series', {
            url: '/series',
            templateUrl: 'modules/series/series.view.html',
            controller: 'SeriesController as vm'
        });

    // catch all route
    // send users to the form page
    $urlRouterProvider.otherwise('//profile');
})

但是当我处于 /profile (form.profile) 之类的状态，并单击模板中带有 ui-sref="form.movie" 的按钮时，我不能转到状态/电影，我收到一个错误：

    Error: Could not resolve 'form.movie' from state 'form.profile'
at Object.v.transitionTo (angular-ui-router.min.js:7)
    at Object.v.go (angular-ui-router.min.js:7)
    at angular-ui-router.min.js:7
    at angular.js:18953
    at e (angular.js:5824)
    at angular.js:6100

我正在努力更好地理解孩子，但如果有人可以帮助我，我还没有得到它。谢谢你，抱歉英语不好。

【问题讨论】：

标签： angularjs forms routing angular-ui-router state

【解决方案1】：

状态只是将视图/控制器组合附加到标签（url）的简单方法，您可以在页面上拥有多个 ui-view 而不仅仅是一个 ng-view。如何在应用程序中构建这些内容取决于您，但附加到状态的 url 很重要，您可能提供的任何查询字符串参数也很重要。

首先要考虑的是，父页面的 URL 将是您浏览器 URL 的一部分，但不一定是您所在州的 URL 的一部分，除非您明确希望它是。因此，如果您的“form.profile”状态包含您打算加载“form.movie”状态的ui-view，浏览器将显示

/path/to/your/app/#/form.profile/form.movie

父/子关系在 url 中明确编码，电影将插入到配置文件模板 (about.view.html) 内的 ui-view 中。

此外，假设您有多部电影要以 form.movie 状态显示。也许你有一些导航可以让人们从列表中选择电影并将其加载到子视图中。在这种情况下，如果您有两个链接都使用 ui-sref="/movie" 第一个会起作用，但第二个不会显示页面中的更改。为什么？因为页面的状态没有改变。 url 是相同的，因此 ui-router 认为不需要更改。相反，您必须像这样定义状态：

        .state('form.movie', {
            url: '/movie?movieId',
            templateUrl: 'modules/movie/movie.view.html',
            controller: 'MovieController as vm'
        })

然后在 ui-sref 中提供一些识别数据来指示要显示的电影。像这样的：

<a ui-sref="form.movie({movieId:1})">Movie 1</a>
<a ui-sref="form.movie({movieId:2})">Movie 2</a>

这些链接将在页面上呈现为 /path/to/my/page/#/form.movie?movieId=1（或 2）。或者，对个人资料和电影使用上述父/子关系可能如下所示：

/path/to/my/app/#/form.profile/form.movie?movieId=1

当您在浏览器中将鼠标悬停在这些 URL 上时，您可以看到它们，但检查 HTML 只会显示 ui-sref 定义，这可能会让人感到困惑。

【讨论】：

实际上并非如此，我在本教程的基础上工作得非常好 (scotch.io/tutorials/angularjs-multi-step-form-using-ui-router) 并使用 '.' ui-sref 中的符号，我也尝试了你的方法，但它不起作用。无论如何谢谢你@tokkov
该教程与我描述的完全一样。也许如果您在问题中包含模板的 HTML 和控制器，我可以提供更多帮助。因为它是教程，所以我的答案基本相同，只是教程使用点分隔符符号而我使用斜杠分隔符。无论是工作还是行为都是相同的。但是，如果没有您的应用程序的其余部分，我无法更具体地说明为什么会发生这种行为。
你编辑了你的答案@tokkov，你给出的第一个答案不起作用，当你说这是基于 URL 时，''ui-sref 必须指向你在州，而不是州标签..''。现在我已经解决了我的问题。无论如何，谢谢。

【解决方案2】：

> Here is simple working example of state provider


    <!DOCTYPE html>
        <html lang="en">
            <head ng-app="myApp">

                <script src="angular.min.js">
                </script>
                <script src="../../dist/ng-flow-standalone.js">
                </script>
                <script src="angular-ui-router.min.js">
                </script>
                <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
                <link href="simple-sidebar.css" rel="stylesheet">

                <script type="text/javascript">
                    var app=angular.module('myApp',['ui.router']);
                    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
                        $urlRouterProvider.otherwise('/');
                        $stateProvider
                            .state('def', {
                                url: '/',
                                templateUrl: 'def.html'//this is static page
                            })
                            .state('upld', {
                                url: '/upld',
                                templateUrl: 'upl.html'//this is static page      
                            })
                            .state('del', {
                                url: '/del',
                                templateUrl: 'del.html' //this is static page     
                            })
                            .state('show', {
                                url: '/show',
                                templateUrl: 'show.html'  //this is static page    
                            });  
                </script>
    </head>
    <body>
    <a ui-sref=".upld" id="a1">Upload Images</a>
    <a id="a2" ui-sref=".del">Delete Images</a>
    <a id="a3" ui-sref=".show">Show Images</a>


    </body>
    </html>

【讨论】：

Tks @vishal，但问题已经解决了。您回答的方法是正确的，我已经在我的固定导航中使用它，它有效，我的问题出在状态视图上。