如何将参数传递给兄弟 ui-router 命名视图？

Question

我最近在 egghead.io 上观看了一个视频，该视频展示了如何进行多个命名视图 (https://jsbin.com/nanifo/7/edit?html,js,output)。我有一个应用程序，我需要将一些参数传递给命名视图。

像下面这样配置我的应用程序允许参数 p1 和 p2 在“测试”状态之间传递：

angular.module("testapp",['ui.router'])
 .config(function($stateProvider) {
 .state("test", {
                abstract: true,
                url: "/test",
                templateUrl: "app/template/testabstract.html",
                controller: "TestAbstractController",
                params: {
                    p1: null,
                    p2: null
                }
            })
            .state("test.view1", {
                url: "/view1",
                templateUrl: "app/template/testview1.html",
                controller: "TestView1Controller"
            })
 )};

在这里查看工作的 jsbin：https://jsbin.com/cedeqa/12/edit?html,js,output

最初，当我将状态更改为更“细化”时它不起作用，因为我将参数放在了错误的位置：

angular.module("testapp",['ui.router'])
 .config(function($stateProvider) {
 .state("test", {
                abstract: true,
                url: "/test",
                views: {
                    "footer@": { templateUrl: "app/template/footer.admin.html" },
                    "": {
                        templateUrl: "app/template/adminabstract.html",
                        controller: "AdminAbstractController",
                        params: {
                            p1: null,
                            p2: null
                        }
                    }

                }, 
            })
            .state("test.view1", {
                url: "/view1",
                templateUrl: "app/template/testview1.html",
                controller: "TestView1Controller"
            })
 )};

但是，实验（和重读文档）向我展示了参数真正需要去哪里：https://jsbin.com/jijuca/4/edit?html,js,output

我想，我已经设法让它按照我想要的方式工作......但是，我应该这样做吗？有没有更好的方法在“兄弟姐妹”之间共享数据？

Answer 1

您正在向多个视图传递抽象状态。本质上，这不是抽象状态的使用方式。文档说

“一个抽象状态可以有子状态，但不能自己激活。‘抽象’状态只是一种不能转换到的状态。当它的一个后代被激活时，它被隐式激活。”

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

我怀疑这就是你的控制器坏了的原因。通常，抽象状态用于为所有子视图指定 url、变量和行为。例如，您可以使用抽象状态在您的 url 中表示 CRUD。因此，如果您正在为狗创建 CRUD，您的 URL 可能如下所示：

/狗/索引

/狗/新

/dogs/{id}/edit

/dogs/{id}/删除

在上面的示例中，您将有一个狗的抽象类，然后是 dog.index dog.new 等的子状态。

因此，如果您要传递一个抽象类的多个视图，那么您并没有将其用于预期目的。这些视图应该是某种抽象继承状态的“子”状态。

这些观点看起来很适合成为彼此的兄弟国家。我希望这有帮助。如果我不完全理解你的问题，或者如果有人可以指出我已经完成的地方，请告诉我！