角 - 解决了在同一视图/路由/页多个控制器 [英] Angular - resolving for multiple controllers in the same view/route/page

问题描述

我们正在建设一个大型SPA，目前该应用程序是建立与构件/组件。每一个模板，控制器。但许多可以嵌套在相同的路由。例如：在路线 /用户/ 我可以有一个`userCtrl 和 userTemplate 呈现用户统计部分。一个 graphCtrl 和 graphTemplate 渲染一些D3图。一个的listctrl 和 listTemplate 渲染列表。所有这些部件应该是可重复使用的（有不同的CSS和布局，有时与其他网页相同CTRL不同的模板）。我需要从一个服务实例的一些数据 - 可以说，这回我的用户ID和更验证服务。所以在主应用程序的路由我定义了一个 {决心MYID：功能（srvname）{返回srvname.myId}} 为 userCtrl 路线而 routeProvider 路线的在子句。

We are building a big SPA , currently the app is build with widgets/components. each with a template, controller. but many can be nested in the same route. for example: In the route /users/ I can have a `userCtrl and a userTemplatethat renders the user stats parts. a graphCtrl and a graphTemplate to render some d3 graphs. a listCtrl and a listTemplate to render a list. all of those widgets should be reusable (with different css and layouts, sometimes with the same ctrl different templates in other pages). I need to instantiate some data from a service - Lets say a service that return my user id and more validations. so in the main app routing i define a resolve{myId: function(srvname){return srvname.myId}} for userCtrl route which the when clause of routeProvider routes to.

我的问题是，的listctrl 不等待 userCtrl （即主 CTRL页，它得到的路线），以解决不同的承诺，再失败，丢失的数据。

My problem is that listCtrl doesn't wait for userCtrl (the main page ctrl , which gets the route) to resolve the different promises, and then fails with missing data.

有没有办法来定义多个控制器同样的决心，他们中的一些是不是直接路由目标，但更（极）大的分量？有没有更好/更聪明的办法做到这一点？

Is there a way to define the same resolve for multiple controllers, that some of them aren't a direct route target but more of (very) big component? Is there a better/smarter way to do this?

我知道我可以用指令为。但是从的listctrl 的经营业务逻辑移动到指令看起来完全错误的。

I know I can use directive for that. but moving the bussiness logic from listCtrl to a directive looks plain wrong.

我会很高兴的任何帮助和建议

I'll be glad for any help and advice

推荐答案

有关控制器之间通信的标准建议是使用服务。如果我读你的描述正确的，那么你的情况顶层控制器将负责建立模型并为后裔控制器读取设置它的服务。

The standard advice for communicating between controllers is to use a service. If I'm reading your description right, then in your case the top-level controller would be responsible for setting up the model and setting it in the service for the "descendant" controllers to read.

修改作为@ alonisser的评论：

Edit for @alonisser's comment:

您应该能够依赖控制器的视图的数据绑定到一个功能上依赖$范围（比如可视数据（）以这样的方式，如果函数返回空，该元素是隐藏或显示微调UI。

You should be able to data-bind the dependent controller's view to a function on the dependent $scope (say viewData() in such a way that if the function returns null, the element is hidden or shows a "spinner" UI.

模板依赖性看起来是这样的：

The dependent template would look something like:

...
<div data-ng-if="viewData() !== null">
    <!-- show display elements based on the return value from viewData() -->
</div>
...

为可视数据的设置会是这个样子：

...
$scope.viewData = function() {
    if ($scope.model.asyncData === null) {
        $log.info("no data yet!");
        return null;
    }
    else
        return prepare_for_view($scope.model.asyncData);
}
...

而在userCtrl的异步调用看起来是这样的：

And the async calls in the userCtrl look something like:

something_that_returns_a_promise.then(function (result) {
    $scope.model.asyncData = result;
});

一个关键部分是， something_that_returns_a_promise（）有要的东西内部AngularJS调用堆栈，例如使用做了 $ HTTP 。如果是这样的话，角自动调用 $范围。$适用（），和你相关的显示元素应该无缝更新。否则，你将需要调用 $范围。$适用（）自己在异步回调，设置 $ scope.model.asyncData 。

A key piece is that the something_that_returns_a_promise() has to be something "inside" the AngularJS call stack, for example done using $http. When that's the case, Angular automatically calls $scope.$apply(), and your dependent display elements should update seamlessly. Otherwise you will need to call $scope.$apply() yourself in the async callback that sets $scope.model.asyncData.

这篇关于角 - 解决了在同一视图/路由/页多个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！