如何正确地将数据从自定义服务传递到角度控制器
how to properly pass the data from a custom service to an angular controller
我开始编写一个Angular应用程序，它与Flask API通信。在我的应用程序中，我有一个名为"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]
现在，我决定直接在我的控制器中使用$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];
});
}
相关文章：
- 尝试将服务链接到控制器时出现角度问题
- 使用服务(AngularJS）在控制器之间共享数据
- 从AngularJS中的另一个文件中的控制器访问服务
- AngularJS 1.5.x服务未正确绑定，并且未在控制器中更新
- Ionic将firebase注入工厂，同时将控制器和服务保存在不同的文件中
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- Http服务工厂将未定义的返回到Angular中的控制器
- 由控制器调用的服务更改时，Angular未更新视图
- 将Browserify与Angular JS结合使用--将服务传递到控制器中
- 将工厂服务数据发送到控制器，以便在视图中使用
- 角度控制器服务承诺不起作用
- 跨控制器服务的角度json数据
- 使用DOM中的信息创建一个控制器/服务来持久化数据
- 推迟在应用程序运行angularjs上创建控制器/服务
- 将主机配置传递给控制器/服务
- 控制器/服务的最佳实践
- 控制器+服务结构不能正确触发离子切换ng-change
- 未捕获的TypeError: undefined不是函数'当把控制器/服务放在单独的js文件中时
- 一个AngularJS文件中有多少控制器(服务、工厂、指令）
- 我应该保护我的 Angular 控制器/服务免受全局命名空间的影响吗?
