堆棧內存溢出
  簡體   English   中英

如何將數據從定制服務正確傳遞到角度控制器

[英]how to properly pass the data from a custom service to an angular controller

 原文  2015-03-24 15:25:51  5   1    javascript/ angularjs/ flask

問題描述

我開始編寫一個與Flask API通信的Angular應用程序。 在我的應用程序中，我有一個名為“ dashboard.js”的控制器。 在此控制器中，我具有以下功能： 

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

該函數利用名為“ datacontext.js”的自定義服務，其中包含以下相應的函數： 

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 個解決方案

解決方案1
 0  2015-03-25 02:18:18

現在，我決定直接在控制器中使用$ 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];
                    });
        }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 角度：將數據從服務/工廠傳遞到控制器 Angular.js：如何將數據從控制器傳遞到自定義服務 如何將數據從自定義角度元素傳遞到控制器？ 如何從角度服務獲取數據到控制器？ 將數據從服務傳遞到控制器 將數據從服務傳遞到控制器 如何將數據從輸入傳遞到定制服務？ 如何傳遞嵌套服務並獲得角度工廠對控制器的響應 如何在Angular JS中將$ rootScope變量從控制器傳遞到服務 Angular JS：如何將響應從服務傳遞到控制器？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM