【问题标题】：Angularjs controllerAngularjs 控制器
【发布时间】：2013-04-23 15:32:34
【问题描述】：

我有一个问题，我找不到合适的答案。

好的，例如，我有从 api 收集的数据

管理员

用户

用户个人资料

用户统计

为此我有

adminCtrl

用户控制

userprofileCtrl

userstatsCtrl

问题是当我在我的控制器中时，如果我想查看用户配置文件然后 userprofileCtrl 从 admins/:admin_id/users/:user_id/profile 这样的 url 获取路由我必须在每个控制器中收集所有数据，如管理员、用户和配置文件，以便能够在我的视图中打印有关用户的所有详细信息。

我可以以某种方式嵌套控制器吗？这会导致控制器出现大量干燥现象。

还想知道打印错误消息的最佳做法是什么，我有 apiservice，它可以向我的 api 发出所有请求，我应该将消息设置为如何，rootScope？

【问题讨论】：

我还没有太多编写大型 Angular 应用程序的经验，我正在对您的布局做出假设（每个视图带有多个控制器的 ngView）。也就是说，我的猜测是您需要一些抽象层，例如 adminCtrl->UserService->UserDataService 和 userCtrl->UserService->UserDataService。 UserService 将用户信息保存在内存中，以便它可以为其他控制器提供服务，而无需向服务器重复请求数据。
+1 使用服务docs.angularjs.org/guide/dev_guide.services

标签： javascript angularjs controller

【解决方案1】：

我认为你需要看看 angular-ui 的 ui-router 指令。

它是专门为嵌套路由设计的。

https://github.com/angular-ui/ui-router

http://angular-ui.github.io/ui-router/sample/#/

【讨论】：

我是 Angular 的新手，但这似乎有很多代码和复杂性。

【解决方案2】：

您可以在视图中嵌套控制器，因此每个子控制器都会继承父控制器的模型。

查看“控制器继承示例”中的 Angular 文档：http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

控制器：

angular.module('App', [])
.controller('MainCtrl', ['$scope', function($scope){
    $scope.foo = 'foo';
}])
.controller('CtrlOne', ['$scope', function($scope){

}])
.controller('CtrlTwo', ['$scope', function($scope){
    $scope.foo = 'bar';
}]);

那么您的视图将如下所示：

<div ng-app='App'>
    <div ng-controller='MainCtrl'>
        <div ng-controller='CtrlOne'>
            CtrlOne: {{foo}}
        </div>
        <div ng-controller='CtrlTwo'>
            CtrlTwo: {{foo}}
        </div>
    </div>
</div>

jsFiddle 上面的例子： http://jsfiddle.net/guilhermenagatomo/pAHR8/

更复杂的方法是使用服务在控制器之间共享数据。

【讨论】：

【解决方案3】：

如前所述，您可以在应用程序中嵌套控制器 - 即；

<div ng-controller='outercontroller'>
     <div ng-controller='innercontroller'>
     </div>
</div>

内部控制器可以访问您在外部控制器范围内定义的任何内容 - 它会隐藏外部控制器的值。您还可以通过 $scope.$parent 从内部控制器的范围访问外部控制器中的值。这可能会有所帮助：Inheritance for scopes in AngularJS

理想情况下，您应该使用服务来检索和存储数据。然后，您可以从服务中检索它。另一个优势是，您可以将服务设计为仅在服务发生任何更改时才刷新其数据，从而避免您进行可能的冗余调用。 Socket.io 可能用于此目的，或者您可以定义一个计时器，使其仅在设定的时间后刷新。

至于错误信息；我可能会在必要的地方创建 try/catch（或您打算用于错误的任何逻辑）块，并将错误代码传递给 errorMessageService。在我看来，我会将错误参数绑定到服务上。如果服务中存在错误，它将在视图中显示错误。

【讨论】：

【解决方案4】：

1

在我看来，控制器应该只用于启动范围状态，数据加载任务应该移动到angular.factory 或angular.service 取决于您的需要。好处是：

服务对象存在于应用程序生命周期中。您将始终处理同一个对象，这样即使您路由到另一个 url 或控制器，您也可以保留数据。
您的数据将随处可用
您不必担心会弄乱范围继承。

在某些情况下，您想在 html 中使用 ng-repeat，您可以这样做：

app.run(function($rootScope) {
    $rootScope.yourDataService = yourDataService
}

所以你的ng-repeat 会变成：

<li ng-repeat="item in yourDataService.items"></li>

2

您可以在服务对象中访问 $rootScope，但是如果您按照我的第一个答案进行操作，则不必担心。您可以在app.service 内的服务对象中附加错误消息，然后它将以$rootScope.yourDataService.errorMessage 的形式提供。

【讨论】：