如何将数据从自定义服务正确传递到角度控制器

时间：2015-03-24 15:25:52

标签： javascript angularjs flask

我开始编写一个与Flask API通信的Angular应用程序。 在我的应用程序中，我有一个名为＆＃39; dashboard.js＆＃39;的控制器。 在这个控制器中，我有以下功能：

function getSignedContractsFromServer() {
                return datacontext.getSignedContractsFromServer()
                    .then(function (data) {
                $scope.americasPriorWeekThree = data[0].americasPriorWeekThree;
                $scope.ameaPriorWeekThree = data[0].ameaPriorWeekThree;
                $scope.australiaPriorWeekThree = data[0].australiaPriorWeekThree;
                $scope.europePriorWeekThree = data[0].europePriorWeekThree;
                $scope.nordicsPriorWeekThree = data[0].nordicsPriorWeekThree;
                $scope.ukiPriorWeekThree = data[0].ukiPriorWeekThree;
                $scope.americasPriorWeekTwo = data[0].americasPriorWeekTwo;
                $scope.ameaPriorWeekTwo = data[0].ameaPriorWeekTwo;
                $scope.australiaPriorWeekTwo = data[0].australiaPriorWeekTwo;
                $scope.europePriorWeekTwo = data[0].europePriorWeekTwo;
                $scope.nordicsPriorWeekTwo = data[0].nordicsPriorWeekTwo;
                $scope.ukiPriorWeekTwo = data[0].ukiPriorWeekTwo;

                $scope.americasPriorWeekOne = data[0].americasPriorWeekOne;
                $scope.ameaPriorWeekOne = data[0].ameaPriorWeekOne;
                $scope.australiaPriorWeekOne = data[0].australiaPriorWeekOne;
                $scope.europePriorWeekOne = data[0].europePriorWeekOne;
                $scope.nordicsPriorWeekOne = data[0].nordicsPriorWeekOne;
                $scope.ukiPriorWeekOne = data[0].ukiPriorWeekOne;

                $scope.americasCurrentWeek = data[0].americasCurrentWeek;
                $scope.ameaCurrentWeek = data[0].ameaCurrentWeek;
                $scope.australiaCurrentWeek = data[0].australiaCurrentWeek;
                $scope.europeCurrentWeek = data[0].europeCurrentWeek;
                $scope.nordicsCurrentWeek = data[0].nordicsCurrentWeek;
                $scope.ukiCurrentWeek = data[0].ukiCurrentWeek;

                assignChartData();

                return vm.signedContracts = data[0];
            });
        }

此函数使用名为＆＃39; datacontext.js＆＃39;的自定义服务，其中包含以下相应的功能：

function getSignedContractsFromServer(){
            $http.get('/signed_contracts').
                success(function(data, status, headers, config) {
                    console.log("success retrieving data from server:  " + data.contracts);
                    return data.contracts;
                }).
                  error(function(data, status, headers, config) {
                    console.log("error retrieving data from server!");
                    return "error";
                  });
        }

此功能以下列方式公开：

var service = {
            getSignedContracts: getSignedContracts,
            getSignedContractsFromServer: getSignedContractsFromServer
        };

        return service;

数据检索的初始模型似乎正在运行 - 数据是从Flask API发送的：

@app.route('/signed_contracts')
def signed_contracts():
    contracts = "{'param': 'foo', 'val': 2}"
    return jsonify({'contracts': contracts})

getSignedContractsFromServer正在接收此数据，如日志中所示：

"success retrieving data from server:  {'param': 'foo', 'val': 2}"

但是，我也在浏览器控制台中收到这条长错误消息，我需要帮助理解和修复。 为了更好地了解整个序列，我按照事件发布的顺序发布整个浏览器日志。此日志条目还包含长错误，我要求它帮助我：

GET http://localhost:5000/#/ [HTTP/1.0 200 OK 1ms]
GET http://localhost:5000/static/css/ie10mobile.css [HTTP/1.0 304 NOT MODIFIED 3ms]
GET http://localhost:5000/static/css/bootstrap.min.css [HTTP/1.0 304 NOT MODIFIED 5ms]
GET http://localhost:5000/static/css/font-awesome.min.css [HTTP/1.0 304 NOT MODIFIED 4ms]
GET http://localhost:5000/static/css/toastr.css [HTTP/1.0 304 NOT MODIFIED 6ms]
GET http://localhost:5000/static/css/customtheme.css [HTTP/1.0 304 NOT MODIFIED 6ms]
GET http://localhost:5000/static/css/styles.css [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/css/breeze.directives.css [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/lib/app/common/jquery-2.1.1.js [HTTP/1.0 304 NOT MODIFIED 1ms]
GET http://localhost:5000/static/lib/angular/angular.js [HTTP/1.0 304 NOT MODIFIED 3ms]
GET http://localhost:5000/static/lib/angular/angular-animate.js [HTTP/1.0 304 NOT MODIFIED 4ms]
GET http://localhost:5000/static/lib/angular/angular-route.js [HTTP/1.0 304 NOT MODIFIED 5ms]
GET http://localhost:5000/static/lib/angular/angular-sanitize.js [HTTP/1.0 304 NOT MODIFIED 7ms]
GET http://localhost:5000/static/lib/bootstrap/bootstrap.js [HTTP/1.0 304 NOT MODIFIED 8ms]
GET http://localhost:5000/static/lib/other/toastr.js [HTTP/1.0 304 NOT MODIFIED 8ms]
GET http://localhost:5000/static/lib/other/moment.js [HTTP/1.0 304 NOT MODIFIED 8ms]
GET http://localhost:5000/static/lib/bootstrap/ui-bootstrap-tpls-0.10.0.js [HTTP/1.0 304 NOT MODIFIED 10ms]
GET http://localhost:5000/static/lib/other/spin.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/other/breeze.debug.js [HTTP/1.0 304 NOT MODIFIED 13ms]
GET http://localhost:5000/static/lib/other/breeze.angular.js [HTTP/1.0 304 NOT MODIFIED 18ms]
GET http://localhost:5000/static/lib/other/breeze.directives.js [HTTP/1.0 304 NOT MODIFIED 17ms]
GET http://localhost:5000/static/lib/other/breeze.saveErrorExtensions.js [HTTP/1.0 304 NOT MODIFIED 21ms]
GET http://localhost:5000/static/lib/other/breeze.to$q.shim.js [HTTP/1.0 304 NOT MODIFIED 19ms]
GET http://localhost:5000/static/lib/app/ng-google-chart.js [HTTP/1.0 304 NOT MODIFIED 19ms]
GET http://localhost:5000/static/lib/app/app.js [HTTP/1.0 304 NOT MODIFIED 16ms]
GET http://localhost:5000/static/lib/app/config.js [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/lib/app/config.exceptionHandler.js [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/lib/app/config.route.js [HTTP/1.0 304 NOT MODIFIED 9ms]
GET http://localhost:5000/static/lib/app/common/common.js [HTTP/1.0 304 NOT MODIFIED 9ms]
GET http://localhost:5000/static/lib/app/common/logger.js [HTTP/1.0 304 NOT MODIFIED 9ms]
GET http://localhost:5000/static/lib/app/common/spinner.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/app/common/bootstrap/bootstrap.dialog.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/app/admin/admin.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/app/dashboard/dashboard.js [HTTP/1.0 200 OK 16ms]
GET http://localhost:5000/static/lib/app/layout/shell.js [HTTP/1.0 304 NOT MODIFIED 15ms]
GET http://localhost:5000/static/lib/app/layout/sidebar.js [HTTP/1.0 304 NOT MODIFIED 15ms]
GET http://localhost:5000/static/lib/app/services/datacontext.js [HTTP/1.0 304 NOT MODIFIED 13ms]
GET http://localhost:5000/static/lib/app/services/directives.js [HTTP/1.0 304 NOT MODIFIED 14ms]
GET http://localhost:5000/static/lib/app/services/entityManagerFactory.js [HTTP/1.0 304 NOT MODIFIED 14ms]
GET http://localhost:5000/static/lib/app/layout/shell.html [HTTP/1.0 304 NOT MODIFIED 2ms]
GET http://localhost:5000/static/lib/app/dashboard/dashboard.html [HTTP/1.0 304 NOT MODIFIED 3ms]
"[shell] " "Hot Towel Angular loaded!" null angular.js:10046
"Error: datacontext.getSignedContractsFromServer(...) is undefined
getSignedContractsFromServer@http://localhost:5000/static/lib/app/dashboard/dashboard.js:31:17
activate@http://localhost:5000/static/lib/app/dashboard/dashboard.js:24:29
dashboard@http://localhost:5000/static/lib/app/dashboard/dashboard.js:20:9
invoke@http://localhost:5000/static/lib/angular/angular.js:3956:7
instantiate@http://localhost:5000/static/lib/angular/angular.js:3967:7
$ControllerProvider/this.$get</<@http://localhost:5000/static/lib/angular/angular.js:7260:7
nodeLinkFn/<@http://localhost:5000/static/lib/angular/angular.js:6651:13
forEach@http://localhost:5000/static/lib/angular/angular.js:332:11
nodeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6638:11
compositeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6086:13
publicLinkFn@http://localhost:5000/static/lib/angular/angular.js:5982:30
ngViewFillContentFactory/<.link@http://localhost:5000/static/lib/angular/angular-route.js:919:7
nodeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6693:1
compositeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6086:13
publicLinkFn@http://localhost:5000/static/lib/angular/angular.js:5982:30
createBoundTranscludeFn/boundTranscludeFn@http://localhost:5000/static/lib/angular/angular.js:6106:13
controllersBoundTransclude@http://localhost:5000/static/lib/angular/angular.js:6713:11
update@http://localhost:5000/static/lib/angular/angular-route.js:869:17
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:5000/static/lib/angular/angular.js:12937:15
updateRoute/<@http://localhost:5000/static/lib/angular/angular-route.js:550:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/static/lib/angular/angular.js:11546:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/static/lib/angular/angular.js:11546:15
qFactory/ref/<.then/<@http://localhost:5000/static/lib/angular/angular.js:11632:11
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:5000/static/lib/angular/angular.js:12658:9
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:5000/static/lib/angular/angular.js:12470:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:5000/static/lib/angular/angular.js:12762:13
done@http://localhost:5000/static/lib/angular/angular.js:8357:34
completeRequest@http://localhost:5000/static/lib/angular/angular.js:8571:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:5000/static/lib/angular/angular.js:8514:1
" "<div data-ng-view="" class="shuffle-animation ng-scope">" angular.js:10046

"[app] " "[HT Error] datacontext.getSignedContractsFromServer(...) is undefined" Object { exception: TypeError, cause: "<div data-ng-view="" class="shuffle-animation ng-scope">" } angular.js:10046

GET https://www.google.com/jsapi [HTTP/1.1 200 OK 223ms]
GET http://localhost:5000/signed_contracts [HTTP/1.0 200 OK 1ms]
"success retrieving data from server:  {'param': 'foo', 'val': 2}" datacontext.js:53
GET http://localhost:5000/static/css/images/icon.png [HTTP/1.0 304 NOT MODIFIED 2ms]
GET https://www.google.com/uds/ [HTTP/1.1 200 OK 34ms]

1 个答案:

答案 0 :(得分：0)

现在，我决定直接在我的控制器中使用$ http：

function getSignedContractsFromServer() {
            $http.get('/signed_contracts').
                success(function(data) {
                    console.log('data.americasPriorWeekThree:  ' + data.americasPriorWeekThree);
                $scope.americasPriorWeekThree = data.americasPriorWeekThree;
                $scope.ameaPriorWeekThree = data.ameaPriorWeekThree;
                $scope.australiaPriorWeekThree = data.australiaPriorWeekThree;
                $scope.europePriorWeekThree = data.europePriorWeekThree;
                $scope.nordicsPriorWeekThree = data.nordicsPriorWeekThree;
                $scope.ukiPriorWeekThree = data.ukiPriorWeekThree;
                $scope.americasPriorWeekTwo = data.americasPriorWeekTwo;
                $scope.ameaPriorWeekTwo = data.ameaPriorWeekTwo;
                $scope.australiaPriorWeekTwo = data.australiaPriorWeekTwo;
                $scope.europePriorWeekTwo = data.europePriorWeekTwo;
                $scope.nordicsPriorWeekTwo = data.nordicsPriorWeekTwo;
                $scope.ukiPriorWeekTwo = data.ukiPriorWeekTwo;

                $scope.americasPriorWeekOne = data.americasPriorWeekOne;
                $scope.ameaPriorWeekOne = data.ameaPriorWeekOne;
                $scope.australiaPriorWeekOne = data.australiaPriorWeekOne;
                $scope.europePriorWeekOne = data.europePriorWeekOne;
                $scope.nordicsPriorWeekOne = data.nordicsPriorWeekOne;
                $scope.ukiPriorWeekOne = data.ukiPriorWeekOne;

                $scope.americasCurrentWeek = data.americasCurrentWeek;
                $scope.ameaCurrentWeek = data.ameaCurrentWeek;
                $scope.australiaCurrentWeek = data.australiaCurrentWeek;
                $scope.europeCurrentWeek = data.europeCurrentWeek;
                $scope.nordicsCurrentWeek = data.nordicsCurrentWeek;
                $scope.ukiCurrentWeek = data.ukiCurrentWeek;

                assignChartData();

                //return vm.signedContracts = data[0];
                    });
        }
相关问题
最新问题