Question

我在这里创建了一个plunker repro：http://plnkr.co/edit/zU3PtJamS61Ac0bAKToD?p=preview

当你转到项目标签并单击编辑按钮时，我希望Edit.Html视图在ui-view＆＃34; outer＆＃34;中呈现。

当我调试时，甚至创建了ProjectsEditController，但状态并未真正激活，并且ui坚持项目视图。

我错了什么？

<!DOCTYPE html>
  <html>
     <head>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
        <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
        <script src="app.js"></script>
        <script src="AdministrationController.js"></script>
        <script src="ProjectsController.js"></script>
        <script src="ProjectsEditController.js"></script>
        <script src="SettingsController.js"></script>
     </head>
     <body ng-app="routedTabs" >
        <div class="wrapper">
           <div ui-view="outer">
              <header class="aside">thats the header </header>
              <div ui-view="menu" id="menu" class="aside">this is the menu aside</div>
              <div ui-view="content" class="main container">
                 <h1>Working on it... </h1>
              </div>
           </div>
        </div>
     </body>
  </html>

Edit.html

<div ng-bind="title"></div>
<button ui-sref="main.projects.edit({id: 10})" class="btn btn-default primary">Edit</button>

app.js

var app = angular.module("routedTabs", ["ui.router", "ui.bootstrap"]);

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

    $urlRouterProvider.otherwise("");

    $stateProvider
        .state("main", {
            abtract: true,
            url: "",
            views: {

                'content@': {
                    templateUrl: 'administration.html',
                    controller: 'AdministrationController'
                }
            }
        })
        .state("main.projects", {
            url: "/projects",
            views: {
                'menu@': {
                    template: 'test'
                },
                'planner@main': {
                    templateUrl: 'projects.html',
                    controller: 'ProjectsController'
                }
            }
        }).state('main.projects.edit', {
            url: '/edit/:id',
            views: {
                'outer@': {
                    templateUrl: 'edit.html',
                    controller: 'ProjectsEditController'
                }
            }
        })
        .state("main.tab2", {
            url: "/settings",
            views: {
                'menu@': {
                    template: 'bla'
                },
                'planner@main': {
                    templateUrl: 'settings.html',
                    controller: 'SettingsController'
                }
            }
        });

});

更新

根据@Karthik的陈述，我无法将编辑视图渲染到＆＃34;外部＆＃34; UI视图。

我在这里准备了一个没有抽象主要状态和标签的plunker。在这个示例中只是一个带有编辑项目按钮的项目视图，该按钮应该将编辑视图呈现到名为＆＃34;外部＆＃34;的ui视图中。并且它不合适！

http://plnkr.co/edit/ogQIpfHz7Cy9Jo03czKL?p=preview

所以我的新问题是，这些样品在这个样品中有什么区别，而不是在标签内部？

那么我怎样具体地使用标签呢？

Answer 1

您的项目正在运行，并显示编辑标签（如果您调试js代码，您将看到它）。在您的情况下，问题出在您的AdministrationController.js。

中

在每个update事件表单tabset上调用go函数，其中包含路由/projects（当前标签）

$scope.go = function(route){
    $state.go(route);
};

这会将状态更改回main.projects，因此状态似乎并非实际发生的变化。

您可能希望在AdministrationController.js内重写触发器，或者在离开制表符时找出触发update / go功能的原因。

查看this topic中的答案是否有帮助。您可以使用此方法代替update函数。

临时解决方案可以使用类似：

$scope.go = function(route){
    if($state.$current.name != 'main.projects.edit'){
        $state.go(route);
    }
}

无法使用ui路由器在父级父视图之外渲染子视图

1 个答案: