如何将数据从AngularJS控制器发送到其服务?
问题描述:
我有我的页面元素像这样如何将数据从AngularJS控制器发送到其服务?
<div ng-app="myApp" class="ng-cloak" ng-controller="MyController as ctrl">
<div class="item" ng-repeat="i in ctrl.items">
<h3>Some text...</h3>
<p ng-bind="i.id"></p>
<button ng-click="alertValue(i.id)">DETAILS</button></p>
</div>
</div>
我的控制器看起来是这样的,有一个方法
'use strict';
App.controller('MyController', ['$scope', 'Item', function ($scope, Item) {
$scope.alertValue = function (id) {
alert('clicked:' + id);
}
}
的正常工作,我得到id为警报。但是,我如何将这个ID从控制器发送到我的服务?我尝试了几个教程,但他们都不一样,我完全迷失了。任何人都可以用简单的方式向我解释这一点,并展示如何做到这一点? 可能需要提供一些其他信息?谢谢。
答
我尽量不使用示波器,因此我会在控制器上为该点击创建一个function
。那么这只是一个你想做的事情。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('my-app', [])
.service('Items', function() {
return {
doWork: function(id) {
console.log(id);
}
};
})
.controller('ItemsCtrl', function(Items) {
var vm = this;
vm.items = [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
{ id: 3, name: 'Baz' },
];
vm.doWork = function(id) {
Items.doWork(id);
};
});
</script>
<div ng-app="my-app">
<div ng-controller="ItemsCtrl as ctrl">
<ul>
<li ng-repeat="item in ctrl.items">
{{item.name}}
<button ng-click="ctrl.doWork(item.id)">Do Work</button>
</li>
</ul>
</div>
</div>
答
您必须使用$http
服务。 $http
服务便于与远程HTTP服务器进行通信。
$http
服务使用then
方法为了附加callback
。
的then()
方法有两个参数:一个success
和error
回调将与响应对象被调用。
使用then()方法,将callback
函数附加到返回的promise
。
事情是这样的:
app.controller('MainCtrl', function ($scope, $http){
$http({
method: 'GET',
url: 'api/url-api'
}).then(function (success){
},function (error){
});
}
见参考here
快捷方法也可用。
$http.get('api/url-api').then(successCallback, errorCallback);
function successCallback(response){
//success code
}
function errorCallback(error){
//error code
}
答
您必须在控制器内部注入服务以将一些数据传递给它。
app.controller.js
App.controller('MyController', ['$scope', 'ItemService', function ($scope, ItemService) {
$scope.alertValue = function (id) {
ItemService.id = id;
}
}
请参考this的更多信息,创建和在角注册的服务。
最好去通过文档https://docs.angularjs.org/guide/services –
我会的,但我希望得到一些简单的例子也是如此。 Thanx先生,Mr_Perfect。很好的登录btw。 – Bobby
你的服务是什么?项目? –