Question

我有一个子状态，用于填充父状态（标题，内容）中的命名视图。但是，他们都共享相同的数据，我不想制作冗余的第二个控制器，但这似乎是我唯一的选择之一。我可以使用一个视图，但它会有太多标记，看起来很混乱。

我阅读了文档here，他们展示的示例是针对状态中的每个视图，让它拥有自己的控制器。

这对我的情景来说并不理想。例如，ui-router说我必须这样做：

.state('root.profile', {
    url: '@:slug',
    views: {
        'header': {
            templateUrl: 'app/profile/profile-header.html',
            controller: 'ProfileHeaderController as profileHeader'
        },
        'content': {
            templateUrl: 'app/profile/profile-body.html',
            controller: 'ProfileBodyController as profileBody'
        }
    }
});

..我更愿意这样做：

.state('root.profile', {
    url: '@:slug',
    views: {
        'header': {
            templateUrl: 'app/profile/profile-header.html'
        },
        'content': {
            templateUrl: 'app/profile/profile-body.html'
        }
    },
    controller: 'ProfileController as profile'
});

第二个选项对我来说效果更好，因为我说它们共享相同的数据而我宁愿不再复制很多相同的逻辑两次，但不幸的是它不起作用。

我已经在为一个控制器使用服务。我不想创建另一个服务只是为了存储一组值以便在两个控制器中使用，因为它们仍然不是真的干。

这样的事情有没有解决方法？

Answer 1

考虑到你的代码示例，我没有看到这个陈述是如何错误的：“他们共享相同的数据，我宁愿不再复制很多相同的逻辑两次”。

1） 他们共享相同的数据 ：由于您有服务，我认为该服务存储当前数据状态，这意味着控制器会共享相同的数据数据。

2） 而不是两次重现大量相同的逻辑 ：您的视图引用相同的控制器，但是不同的实例，这意味着您没有重现任何逻辑。

“我已经在为一个控制器使用服务。我不想创建另一个服务只是为了存储一组值以在两个控制器中使用”。如果您将该服务作为工厂（单件），则将相同的实例传递给使用工厂服务的每个控制器。

但是，我看到了一种可能的解决方案，您可以解决数据并将控制器定义为配置文件状态的父级。这是通过在root和root.profile状态之间建立另一个状态。在下面的示例中，两个视图（profile-body.html和profile-header.html）现在可以使用ProfileController的相同实例。

.state('root', { .. })
.state('root.profile', {
    abstract:true,
    controller:'ProfileController as profile',
    resolve: {
       profile:function(yourProfileDataService) {
           //Resolve profile data
       }
    }
})
.state('root.profile.view', {
    url: '@:slug',
    views: {
        'header': {
            templateUrl: 'app/profile/profile-header.html'
        },
        'content': {
            templateUrl: 'app/profile/profile-body.html'
        }
    }
});

如示例中所示，我还建议使用resolve属性，该属性在实例化控制器之前解析数据，然后将其注入控制器。 Resolve docs

AngularJS / UI-Router：如何将一个控制器与多个命名视图一起使用？

1 个答案: