How to pass functions from factory into controller angularJS

Question

Right now I have this JS bin: http://jsbin.com/uhabed/64/ in which you can hopefully see the infite scroll loading of more images. These images are added when the page bottom is reached by the scroll bar on line 13 of the javascript:

angular.module('infinitescroll', []).directive('onScrolled', function () {
    return function (scope, elm, attr) {
        var el = elm[0];

        elm.bind('scroll', function () {
            if (el.scrollTop + el.offsetHeight >= el.scrollHeight) {
                scope.$apply(attr.onScrolled);
            }
        });
    };
}).controller("scrollCtrl", function($scope, getStuff){
  $scope.data = getStuff;
  $scope.loaddata = function(){
    var length = $scope.data.length;
    for(var i = length; i < length + 10; i ++){
      $scope.data.push(i);
    }
  };
  $scope.loaddata();
}).factory('getStuff',function($http) {
   var images_list = ["www.google.com","www.facebook.com","www.supercuber.com","www.snappiesticker.com"];     
   images_list.addStuff = function(){  $http.get("http://jsbin.com/yehag/2").success(function(data){
    var returned_list = JSON.parse(data.javascript);
    console.log(returned_list);
    for (var i=0;i<8;i++){
      images_list.push(returned_list[i].name);

    }
  });
  };
  console.log(images_list);
  return images_list;
});

I want to replace line 13 with $scope.loaddata = images_list.addStuff(); from the factory below. basically to use the $http function and add the data from that instead. images_list is already being returned properly seeing as the first 4 items in the output are the ones defined in the factory on line 21. However, the optomistic $scope.loaddata = images_list.addStuff(); doesn't seem to be working.

How can I pass this function up into the $scope.loaddata?

charlietfl · Accepted Answer · 2014-07-27 21:12:34Z

1

images_list is an array. You can't arbitrarily assign a property to it like images_list.addStuff

Create an object and return that object from the factory

factory('getStuff',function($http) {
    var images_list = ["www.google.com","www.facebook.com","www.supercuber.com","www.snappiesticker.com"]; 

    var addStuff = function(){....};    

     return{
          images_list: images_list,
          addStuff: addStuff
     }
});

Then in controller:

$scope.data = getStuff.images_list;

$scope.loaddata = getStuff.addStuff

answered Jul 27, 2014 at 21:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

btesser · Accepted Answer · 2014-11-07 16:19:56Z

This is not a clean way of having an array-like object that has additional properties on it, however the above answer that you 'cannot add functions onto an array' is incorrect. While creating array-like objects is kind of messy and should be avoided where possible. If you feel it is absolutely necessary, I would handle it like this (this is similar to how jQuery does it.

function ImagesList($http) {
  this.push.apply(this, [
    "www.google.com",
    "www.facebook.com",
    "www.supercuber.com",
    "www.snappiesticker.com"
  ]);
  this._$http = $http;
}
ImagesList.prototype = {
  push: [].push,
  splice: [].splice,
  pop: [].pop,
  indexOf: [].indexOf,
  addStuff: function () {
    this._$http.get("http://jsbin.com/yehag/2").then(function(data){
      var returnedList = angular.toJson(data.javascript);
      for (var i=0; i<8; i++) {
        this.push(returnedList[i].name);
      }
    }.bind(this));
  }
};
angular
.module('infinitescroll', [])
.service('imageList', ImagesList);
.directive('onScrolled', function () {
  return {
    scope: {
      onScrolled: '&'
    },
    link: function (scope, elm, attr) {
      var el = elm[0];

      // Original implementation will end up causing memory leak because
      // the handler is never destroyed.  Use as follows
      elm.on('scroll.iScroll', function () {
        if (el.scrollTop + el.offsetHeight >= el.scrollHeight) {
          scope.$apply(attr.onScrolled);
        }
      }).on('$destroy', function () {
        elm.off('.iScroll');
      });
    }
  };
}).controller("scrollCtrl", function($scope, imageList){
  $scope.data = imageList;
  $scope.loaddata = function(){
    var length = $scope.data.length;
    for(var i = length; i < length + 10; i++){
      $scope.data.push(i);
    }
  };
  $scope.loaddata();
})

Collectives™ on Stack Overflow

How to pass functions from factory into controller angularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related