Question

我正在尝试创建一个Angular服务来获取图像并将这些图像传递给控制器以推送到旋转木马。我在我的控制器上完成了所有工作，它现在可以使用服务，它不会读取服务功能。我的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>

我的控制器文件，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时，它应该调用控制器中的loadhome（）函数，该函数将服务函数中的项分配给控制器中的var项。然后控制器将所有图像推送到$ scope.slides。这是我的plunkr文件。 http://plnkr.co/edit/JcHrHDJkgFxDfSVcqIJZ

如何让它返回，项目长度等于它收到的数组？ enter image description here

Answer 1

由于您只将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;
            }
        }
    });

DEMO

Answer 2

这对我有用。这里没有一个答案对我有用。在我的服务功能中，我不得不改为var slides = {}; 并在我的控制器文件中

 angular.module('fastLaneApp').controller('HomeCtrl', function ($scope, homeService) {

        $scope.loadhome = function(gender) {  
            $scope.myInterval = 5000;
                var slides = $scope.slides = [];
              var items = homeService.loadhomepage(gender);

             angular.forEach(items, function (item, index) {
                console.log(index);
                console.log(item);
                for (var i=0; i<item.length; i++)
                        {
                    slides.push({   
                     image: item[i].src
                  });
                }
                });
            };
    });

Answer 3

在您的情况下，loadhomepage是一个仅存在于匿名函数中的局部变量。

您需要从服务定义

返回服务接口

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;
    };
    return {
        loadhomepage: loadhomepage
    }
});

演示：Fiddle

Angular Service无法识别功能

3 个答案: