Angular Service 无法识别功能答案

【问题标题】：Angular Service not recognizing functionAngular Service 无法识别功能
【发布时间】：2015-02-19 06:37:19
【问题描述】：

我正在尝试创建一个 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
      });
    }
    };

});

我的服务文件。示例服务.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;
    };

});

所以基本上当我单击男性按钮时，它应该调用控制器中的 loadhome() 函数，该函数将服务函数中的项目分配给控制器中的 var 项目。然后控制器会将所有图像推送到 $scope.slides。这是我的 plunkr 文件。 http://plnkr.co/edit/JcHrHDJkgFxDfSVcqIJZ

我如何让它返回的项目长度等于它接收的数组？

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive angularjs-scope

【解决方案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

【讨论】：

@KingsleySimon，什么不起作用？我唯一能看到的是var slides = [];intstead 使用var slides = {};
它不会进入 forEach 函数，而且它会缓存值并且从不删除它。即使我改变了价值观。它已存储在某个地方并不断加载相同的数据。
当我在 d 控制器中使用 console.log(items) 时，它返回数组 [2] 但是当我在控制台长度时它返回 0。因此我不能将它推到控制器中的幻灯片上。我该如何解决这个问题？
我在 d 服务文件中将 'src' 更改为 'image' 仍然返回 src 而不更改服务中的任何值，为什么？
在我的控制器文件和图像中查看我修改后的代码，它不会进入 for 循环，因为它将数组的长度返回为 0。而在对象内部有 r 2 项.

【解决方案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
                  });
                }
                });
            };
    });

【讨论】：

【解决方案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

【讨论】：

不起作用@Arun。我看到了你的小提琴。我的服务和控制器文件是分开的。这可能是一个原因吗？
@KingsleySimon 是的，正因为如此...见jsfiddle.net/arunpjohny/keqop26k/1 - 不工作（模块定义重复），jsfiddle.net/arunpjohny/keqop26k/3 - 工作
在我的控制器文件和图像中查看我修改后的代码，它不会进入 for 循环，因为它将数组的长度返回为 0。而在对象内部有 r 2 个项目.