标签：angularjs angular-ui-router angular-ui angularjs-routing javascript

我有一个抽象的父状态,它基本上只包含具有ui视图的html模板.我有多个包含多个视图的子状态,每个子状态都有一个也包含多个视图的子状态.该行中的第一个子状态工作正常,但是当我尝试将子状态访问到子状态时,它崩溃了.

这是一些简化的代码(我在真实代码的页面上有几个组件.它的作用类似于todo.它基本上有一个列表和一个编辑视图(我不想对该列表进行行/行编辑)和视图将显示/隐藏,具体取决于您编辑单个项目或创建新项目的状态.我希望其他组件的其余列表仍然显示)：

index.html：

<div ui-view></div>
<div ui-view="todo-edit"></div>
<div ui-view="todo-list"></div>

js代码：

$stateProvider
    .state('root', {
        abstract: true,
        url: '/',
        templateUrl: '/index.html'
    })
    .state('root.todo', { //This state works
        url: '/todo',
        views: {
            '': {
                template: 'Todo list'
            },
            'todo-list': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            }
        }
    })
    .state('root.todo.edit', { //This state does not work
        url: '/edit/:id',
        views: {
            '@root': {
                template: 'Edit todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    })
    .state('root.todo.create', { //This state does not work
        url: '/create',
        views: {
            '@root': {
                template: 'Create todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    });

状态todo.list.edit不起作用,它将仅使我返回到根页面而没有任何错误.任何人都知道问题可能是什么以及如何解决？任何建议,将不胜感激.也许我的观点走错了路,还有另一种解决方法？

我想使用状态而不是ng-include和在服务或类似物之间共享状态来解决不同的“状态”.

解决方法:

您正在定义todo.list的2个子状态：

.state(‘todo.list.edit’)和.state(‘todo.list.create’)

但我看不到您在哪里定义了一个名为todo.list的状态.为此,请定义todo.list状态或使2个创建和编辑状态成为todo的子级：

.state(‘todo.edit’)和.state(‘todo.create’)

也,

待办事项清单

无效,因为您的待办事项状态实际上称为root.todo,因此即使您具有todo.list状态,也必须将其称为root.todo.list.

标签：angularjs,angular-ui-router,angular-ui,angularjs-routing,javascript
来源： https://codeday.me/bug/20191029/1957191.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。