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

时间:2016-06-20 13:54:23

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

我在这里遇到了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.movi​​e" 例如,我无法进入州/电影,我收到了一个错误:

    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

我试图更好地了解孩子,但如果有人能帮助我,我还没有得到它。谢谢,对不起英语不好。

2 个答案:

答案 0 :(得分:0)

状态只是将视图/控制器组合附加到标签(url)的方式,您可以在页面上具有多个ui-view而不是仅一个ng-view。如何在应用程序中构建它们取决于您,但是附加到状态的URL很重要,您可能提供的任何查询字符串参数也是如此。

首先要考虑的是,父网页的网址将成为浏览器网址的一部分,但不一定是您所在州的网址的一部分,除非您明确希望这样做。所以如果你的" form.profile" state包含你打算加载" form.movi​​e"的ui-view。状态进入,浏览器将显示

/路径/到/你的/应用/#/ form.profile / form.movi​​e

父/子关系在网址中明确编码,电影将插入到个人资料模板(about.view.html)中的ui视图中。

此外,假设您想要使用form.movi​​e状态显示多部电​​影。也许你有一些导航允许人们从列表中选择一部电影并将其加载到子视图中。在这种情况下,如果您使用ui-sref =" / movie"第一个会工作,但第二个不会显示页面的变化。为什么?因为页面的状态没有改变。网址是相同的,因此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.movi​​e?movieId=1(或2)。或者,对于个人资料和电影使用上述父/子关系,它可能如下所示:

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

您可以在浏览器中将鼠标悬停在这些网址上时查看这些网址,但检查HTML只会向您显示ui-sref定义,而且可能相当混乱。

答案 1 :(得分:0)

> 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>