Question

我有index.html

<body ng-controller="MainCtrl">
    <nav ng-show="items" mm-menu>
        <ul>
            <li ng-repeat="item in items">{{item.name}}</li>
        </ul>
    </nav>
    <div ui-view></div>
</body>

定义的控制器

MainCtrl($rootScope, MyResource) {
    var p = function() { 
        return MyResource.query().$promise;
    };
    p().then(function(data){
        $rootScope.items = data;
    });
}

SomeCtrl($rootScope){
    var myItems = $rootScope.items;
    // myItems undefined
    myItems[0].name
}

和州

$stateProvider.state('somestate', function() {
    //....
    url: '/something/:id',
    controller: 'SomeCtrl'
});

mm-menu只是jQuery的一个指令。

由于资源加载，SomeCtrl items在html渲染时始终无法使用，但有些值始终从资源返回。在资源返回后，如何与所有控制器和状态共享一些顶级资源数据？

抽象状态是一种方法吗？
或者我应该使用requireJS吗？
也许是angular-data？
jQuery ajax调用后的手动引导程序？
别的什么？

我正在使用angularJS v1.2.23，ui-router v0.2.10。

寻找性感的角度解决方案。

Answer 1

这似乎是一个数据共享问题，需要考虑很多方面。

一个解决方案就是放置＆＃34;项目＆＃34;在mainCtrl的$ scope中。在这种情况下，所有子控制器范围将从mainCtrl范围继承，因此可以访问＆＃34; $ scope.items＆＃34;在他们自己的范围内。这种做事方式的缺点是范围的污染和可能的错误覆盖 - 我会将它用于appConfig或类似的东西，但不是其他任何东西。

第二个解决方案是要有一些负责获取数据的数据管理器服务 - 在这些数据管理器中，您可以缓存响应并在第二次调用时直接返回它们（这在数据波动方面有自己的风险，取决于具体情况）。你可以知道＆＃34;在数据管理器的控制器中，如果为每个GET方法返回一个承诺而设法获取一些数据，并且在控制器中，您只需等待该承诺在.then（）情况下解析。

第三种解决方案将通过活动。负责获取特定数据类型的ctrl将获取数据，当它准备就绪时，它将引发一个事件（例如＆＃34; initDataReady＆＃34;），这将由其他ctrls / etc启用。

就模板而言，你总是可以放一些ng-if =＆＃34; myModel.items！== null＆＃34;加载项目时不会显示内容。您甚至可以放一个（显示加载指示符）。

Answer 2

在使用Angular进行一些工作之后（顺便说一下它非常棒），我开始使用以下结构来确保数据可用性和应用程序流与router-ui及其状态解析属性。

http://www.jvandemo.com/how-to-resolve-application-wide-resources-centrally-in-angularjs-with-ui-router/

并且使用$ cacheFactory存储最需要的结果。

嵌套视图还可以在级别导航上轻松使用过渡（animate css）。

注意：已解析的资源函数需要String依赖关系以进行最小化（ngAnnotate）。

resolve:{
            MyServivce: 'MyService',
            item: ['MyService', function(MyService){
                   MyService.doSomething().$promise;
            }]
}

（写这个角度是1.3.0）

资源结果确保整个应用

2 个答案: