Question

让我们说; state：/ profile（parent）我想在彼此旁边显示3列左侧内容右窗格

state / profile / {id}我想显示左栏和内容的2列。

我到目前为止已经使用了这个代码，但它并没有按照我想要的方式工作。

.state('test', {
  url: "/test",
          views:
          {
            "main":
             { 
                templateUrl:"app/views/templates/test/test.php",
                controller:function($scope, $stateParams)
                {
                 console.log("bum");
                 console.log($stateParams.id); //this is undefined even if i have it defined! 
                }
             }
          }

})
.state('test.id',
{
    url:"/{id}",
    views:{
        "main":{
            templateUrl:"app/views/templates/test/testOverWritten.php",
                controller:function($scope, $stateParams)
                {
                    console.log("main is overwritten");
                    console.log($stateParams.id);
                }
        },
        "testLeft":
        {
            templateUrl:"app/views/templates/test/test.menu.php",
            controller:function($scope)
            {
                console.log("insantieted");
            }
        },
        "testContent":
        {
            templateUrl:"app/views/templates/test/test.content.php",
            controller:function($scope)
            {
            console.log("insantieted");
            }
        }
    }
})

parent.index 有<div ui-view="main"></div>

test.php已集成到main。

<div class="row">
    <div class="col-md-8">
        <div ui-view="testContent">Original</div>
    </div>
    <div class="col-md-3">
        <div ui-view="testLeft">OrgMenu</div>
    </div>
</div>

我应该能够将不同的结构（如test.php）整合到main中，以便在不同的子状态中显示不同的布局

在url调用的子状态（＃/ test / 1）之后应用父状态布局所以布局保持不变我如何更改它或进入另一个模板，其中chrildren可以有不同的布局？

很奇怪但解决方案非常简单，因为我刚刚在4小时的研究后发现:(

.state('test.id',
{
    url:"/{id}",
    views:{
        "main@":{
            templateUrl:"app/views/templates/test/layout2.php",
                controller:function($scope, $stateParams)
                {
                    console.log("main is overwritten");
                    console.log($stateParams.id);
                }
        },
        "testMenu@test.id":
        {
            templateUrl:"app/views/templates/test/test.menu.php",
            controller:function($scope)
            {
                console.log("instantieted");
            }
        },
        "testContent@test.id":
        {
            templateUrl:"app/views/templates/test/test.content.php",
            controller:function($scope)
            {
            console.log("instantieted");
            }
        }
    }
})

我正在将观点引导到错误的路径，使用viewname @ statename带来解决方案，如链接https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views中所述

解决！

Angularjs ['ui-routing']在父级和子级中使用不同的布局

0 个答案: