我正在尝试创建一个 Angular 服务来获取图像并将这些图像传递到 Controller 以推送到轮播。我在 Controller 上完成了所有工作，它现在可以与服务一起使用，但它不读取服务功能。 我的index.html 文件
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<script src="example-service.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div id="fl-main" class="container">
<div class="col-xs-6 col-md-4 filter">
<label class="btn btn-primary" ng-model="male" ng-click="loadhome(male)">Male</label>
<label class="btn btn-primary" ng-model="female">Female</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-8">
<div carousel interval="myInterval">
<div slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto; width: ">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我的 Controller 文件，example.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, homeService) {
$scope.loadhome = function(gender) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
var items = homeService.loadhomepage(gender);
for (var i=0; i<items.length; i++)
{
slides.push({
image: items[i].image
});
}
};
});
我的服务文件。示例-service.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').factory('homeService', function () {
var loadhomepage = function(gender) {
console.log('inloadhomepage');
var slides = [];
if(gender==='male')
{
slides.items =[
{src:'images/carousel.jpg'},
{src:'images/carousel1.jpg'}
];
}
return slides;
};
});
所以基本上，当我单击“male”按钮时，它应该调用 Controller 中的 loadhome() 函数，该函数会将服务函数中的项目分配给 Controller 中的 var 项目。然后 Controller 会将所有图像推送到 $scope.slides。这是我的 plunkr 文件。 http://plnkr.co/edit/JcHrHDJkgFxDfSVcqIJZ
如何让它返回的项目长度等于它接收到的数组？ 
最佳答案
您已正确设置工厂，因为您仅定义了 loadhomepage作为本地函数，您需要公开这些方法。并且您不需要再次重新定义模块，因此使用 angular.module('ui.bootstrap.demo', ['ui.bootstrap']);仅一次。
将其更改为:
angular.module('ui.bootstrap.demo')
.factory('homeService', function() {
return {
loadhomepage: function(gender) {
console.log('inloadhomepage');
var slides = [];
if (gender === 'male') {
slides.items = [{
src: 'images/carousel.jpg'
}, {
src: 'images/carousel1.jpg'
}];
}
return slides;
}
}
});
关于javascript - Angular 服务无法识别功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28600063/