ui-router、resolve、$http 未按文档说明工作

Question

我有 ui-router、resolve、factory 和 $http.get 调用的错误（或者可能是错误的用法？）。

这是配置部分中代码的 sn-p：

$stateProvider
    .state('index', {
        url: '/',
        views: {
            '': {
                templateUrl: './views/layout.html',
                controller: 'MyAppCtrl'
            },
            'app-navbar@index': {
                templateUrl: './views/app-navbar.html'
            },
            'app-accordion@index': {
                templateUrl: './views/app-accordion.html',
                controller: 'AppController',
                resolve: {
                    appPromiseObj: function (AppFactory) {
                        return AppFactory.getApps();
                    }
                }
            },
...

并拥有以下 AppFactory

myApp.factory('AppFactory', function ($http) {
    var appFac = {
        apps: []
    };

    appFac.getApps = function () {
        promiseObj = $http
           .get('http://localhost:4567/applications')
           .success(function (data) {
             console.log("success calling http");
             angular.copy(data, appFac.apps);
        });
        return promiseObj;
    };
    return appFac;
});

但是当我运行应用程序时，'success' 回调中的 console.log 消息永远不会被执行。浏览器控制台日志显示 http 调用执行正常，代码为 200。我假设这意味着 angular 认为它已经失败或者我应该做其他事情吗？

我什至尝试返回 $q 承诺对象（正如其他一些相关的堆栈溢出线程中所建议的那样）但没有成功。在工厂代码中，如果我使用测试数据（即没有 HTTP 调用），即使我没有返回 promise 对象，一切正常。关于问题可能出在哪里的任何指针？感谢任何可以帮助我调试的指针...

Answer 1

我创建了working plunker here。问题是在AppFactory.getApps() 内部处理不正确的promise。我们需要在开始时返回承诺，然后在成功时返回一些调整过的东西。现在可以了...

这是我所做的主要更改：

// INSTEAD of this

// appFac.getApps1 = function () {
//     promiseObj = $http.get('http://localhost:4567/applications')
//       .success(function (data) {
//        console.log("success calling http");
//        angular.copy(data, appFac.apps);
//     });
//     
//     return promiseObj;


// Let's use this

appFac.getApps = function () {
    return $http
      .get('http://localhost:4567/applications')
      .success(function (data) {
       console.log("success calling http");
       angular.copy(data, appFac.apps);
       return appFac.apps
    });

    // this is already returned above
    //return promiseObj;

在行动中检查它here

扩展

基于您的扩展 plunker（仍然没有按预期完全工作）

-http://plnkr.co/edit/c89j3eFvYyguMt0QznAI?p=preview

我创建了调整和工作版本

• http://plnkr.co/edit/f2aucPcbtzqwIEogbjuJ?p=preview

唯一的变化是正确的命名（例如 app.js 被加载为脚本而不是 script.js...）。但最后，promise 现在解决了，这个 json:

[{"id":10566982,"networkID":34256899,"appID":56114114
  ,"name":"10566982name","description"
   ...
]

被加载并转换成手风琴：

• 56114114姓名
• 58616695姓名

最后在下面的评论中回答你的问题：

但是 promiseObj = $http(...)... 之间有什么区别？返回 promiseObj 并返回 $http (...); ?

没有区别（除了我认为我的方法更清楚一点）。真正的区别是：

angular.copy(data, appFac.apps);

对

return appFac.apps

作为 .success() 方法的最后声明。它必须返回一些东西。这就是诀窍