Question

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

以下是配置部分中的代码片段：

$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;
});

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

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

Answer 1

我创建了working plunker here。问题是{{1>}内的 promise 处理不正确。我们需要在开始时回报承诺，然后在成功时返回一些调整后的东西。现在它有效......

这是我做出的主要改变：

AppFactory.getApps()

检查行动here

EXTEND

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

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

我创建了adjsuted和workin版本

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

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

// 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;

加载并转换成手风琴：

56114114name
58616695name

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

但promiseObj = $ http（...）......之间有什么区别？ return promiseObj并返回$ http（...）; ？

没有区别（除了我看到我的方法更清楚）。真正的区别是：

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

VS

angular.copy(data, appFac.apps);

作为 return appFac.apps 方法的最终陈述。它必须返回一些东西。诀窍

ui-router，resolve，$ http无法正常工作

1 个答案: