在角度JS中用控制器逻辑创建服务

时间:2014-05-29 18:07:04

标签: javascript angularjs angular-services

我目前有许多重复逻辑,我需要在许多不同的控制器中使用,我正在寻找一种更干的方法来做事。

例如,我目前有大约12个控制器使用每个控件中使用的lazyload函数。任何时候我想调整这个功能我都要经历所有12个(我不知道!)这就是普通版本的样子:

    $scope.number = user.channel_id;
    activityFactory.query({channelID: user.channel_id}, function(data){
      // the page number
      $scope.page=1;
      $scope.isInfinitScrollDisabled=false;
      // function for inifinite scroll
      $scope.getNextPage=function(){
        $scope.page++;
        $scope.isInfinitScrollDisabled=true;
        // query for the next page
        activityFactory.query({
          channelID: $scope.number,
          page: $scope.page
          }, function(data){
            $timeout(function(){
                      $scope.isInfinitScrollDisabled=false;
            },2000);
            $scope.activities.results = $scope.activities.results.concat(data.results);
        });
      };
       $scope.activities = data;
    });

正如您所看到的,如果没有此功能,我将拥有一个更清晰,更易读的控制器,并将大量业务逻辑移至服务中。 IE:

    activityFactory.query({channelID: user.channel_id}, function(data){
       $scope.activities = data;
    });

问题是我不确定如何将其转变为可重复使用的合成形式。我刚刚开始:

  .service('lazyLoaded', ['', function(){
      // the page number
      $scope.page=1;
      $scope.isInfinitScrollDisabled=false;
      // function for inifinite scroll
    var getNextPage = function(){
      $scope.page++;
      $scope.isInfinitScrollDisabled=true;
      // query for the next page
        activityFactory.query({
          channelID: $scope.number,
          page: $scope.page
          }, function(data){
            $timeout(function(){
                      $scope.isInfinitScrollDisabled=false;
            },2000);
            $scope.activities.results = $scope.activities.results.concat(data.results);
        });
      };
  }])

但是我不确定我是否应该传递$ scope或如何处理不同的资源,因为并非所有内容都是scope.activities,或者我可能不需要传递channelID:scope.number作为参数。这样的结构怎么样?

1 个答案:

答案 0 :(得分:0)

您无需将范围传递到服务中。相反,您仍可以从控制器的范围访问进入工厂的一些范围变量:

.factory('LazyLoaded', function() {
    var lazy = {
        page: 1
    };

    lazy.someFunction = function() {
        console.log('method called');
    };

    return lazy;
})

.controller('MyController', function($scope, LazyLoaded){
    $scope.lazy = LazyLoaded;
    console.log($scope.lazy.page); // logs 1
    $scope.lazy.someFunction(); // logs 'method called'
})