Angular Service not recognizing function

Question

I am trying to create an Angular service that gets images and passes those images to controller to push to a carousel. I did all thework on my controller and it works now with a service, it doesnt read the service function. My index.html file

<!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>

My controller file, 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
      });
    }
    };

});

my service file. example-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;
    };

});

So basically when i click the button male, it should call the loadhome() function in controller which shud assign the items in the service function to var items in the controller. Then controller will push all images to $scope.slides. here is my plunkr file. http://plnkr.co/edit/JcHrHDJkgFxDfSVcqIJZ

how do i get it to return with items length to be equal to the array it receives? enter image description here

Satpal · Accepted Answer · 2015-02-19 06:51:32Z

2

You have setup factory correctly as you have only defined loadhomepage as local function, you need to expose these methods. and you don't need to redefine module again so use angular.module('ui.bootstrap.demo', ['ui.bootstrap']); only once.

Change it to:

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

edited Feb 19, 2015 at 6:51

answered Feb 19, 2015 at 6:43

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Satpal Over a year ago

@KingsleySimon, Whats not working? only thing I can see is var slides = [];intstead use var slides = {};

Kingsley Simon Over a year ago

It isnt going into the forEach function plus it caches the value and never deletes it. Even when i change the values. It has stored in somewhere and keeps loading the same data.

Kingsley Simon Over a year ago

when i console.log(items) in d controller, it returns array [2] but when i console length it returns 0. hence i cant push it to slides in the controller. how do i solve this?

Kingsley Simon Over a year ago

also i changed 'src' to 'image' in d service file and it still returns src not changing any value in the service why?

Kingsley Simon Over a year ago

see my revised code in my controller file and the image as well, it doesnt go into the for loop because it is returning the length of the array to be 0. while inside the object there r 2 items.

Kingsley Simon · Accepted Answer · 2015-02-20 05:11:19Z

This is what worked for me. None of the answers worked for me here. In my service function i did however had to change to var slides = {}; and in my controller file

 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
                  });
                }
                });
            };
    });

Arun P Johny · Accepted Answer · 2015-02-19 06:44:34Z

0

In your case loadhomepage is a local variable which exists only in an anonymous function.

You need to return the service interface from the service definition

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
    }
});

Demo: Fiddle

answered Feb 19, 2015 at 6:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

Kingsley Simon Over a year ago

doesnt work @Arun. I saw your fiddle. my service and controller files are separate. could tht b a reason?

Arun P Johny Over a year ago

@KingsleySimon yes it is because of that... see jsfiddle.net/arunpjohny/keqop26k/1 - not working(the module definition is repeated), jsfiddle.net/arunpjohny/keqop26k/3 - working

Kingsley Simon Over a year ago

see my revised code in my controller file and the image as well, it doesnt go into the for loop because it is returning the length of the array to be 0. while inside the object there r 2 items.

Collectives™ on Stack Overflow

Angular Service not recognizing function

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related