Question

现在我有了这个JS bin：http://jsbin.com/uhabed/64/，你可以在其中看到更多图像的infite滚动加载。当javascript：

第13行的滚动条到达页面底部时，会添加这些图像

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

我想从下面的工厂用$scope.loaddata = images_list.addStuff();替换第13行。基本上使用$ http函数并从中添加数据。 images_list已经正确返回，因为输出中的前4个项目是第21行工厂中定义的项目。但是，光学$scope.loaddata = images_list.addStuff();似乎无法正常工作。

如何将此功能传递到$scope.loaddata？

Answer 1

images_list是一个数组。您不能像images_list.addStuff

那样随意为其分配属性

创建一个对象并从工厂返回该对象

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

然后在控制器中：

$scope.data = getStuff.images_list;

$scope.loaddata = getStuff.addStuff

Answer 2

这不是一种干净的方法，可以让类似于数组的对象具有附加属性，但是上面的答案是你无法将函数添加到数组中。是不正确的。虽然创建类似数组的对象有点混乱，但应尽可能避免。如果你认为这是绝对必要的，我会像这样处理它（这类似于jQuery的做法。

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

如何将函数从工厂传递到控制器angularJS

2 个答案: