我的页面有这样的元素
<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从控制器发送到我的服务?我尝试了几个教程,但它们都不同,我完全迷失了。任何人都可以用一种简单的方式向我解释这个并说明如何做到这一点? 可能是我需要提供一些额外的信息?感谢。
答案 0 :(得分:2)
我尽量不使用范围,因此我会在控制器上为该单击创建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>
答案 1 :(得分:1)
您必须使用import CustomCarousel from './path/to/Carousel';
const arrayOfItemObjects = [
{...},
{...},
{...}
];
<CustomCarousel
items={arrayOfItemObjects} // 3
/>
服务。 $http
服务有助于与远程HTTP服务器进行通信。
$http
服务使用$http
方法以附加then
。
callback
方法有两个参数:then()
和success
回调,将使用响应对象调用。
使用then()方法,将error
函数附加到返回的callback
。
这样的事情:
promise
参见参考here
快捷方式方法也可用。
app.controller('MainCtrl', function ($scope, $http){
$http({
method: 'GET',
url: 'api/url-api'
}).then(function (success){
},function (error){
});
}
答案 2 :(得分:1)
您必须在控制器内注入服务以将一些数据传递给它。
app.controller.js
App.controller('MyController', ['$scope', 'ItemService', function ($scope, ItemService) {
$scope.alertValue = function (id) {
ItemService.id = id;
}
}
有关以角度创建和注册服务的更多信息,请参阅this。