用angular JS用控制器逻辑创建一个服务

Creating a service out of controller logic in angular JS

本文关键字：服务 一个 创建 angular JS 控制器      更新时间：2023-09-26

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

例如，我目前有大约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;
    });
正如您所看到的，如果没有这个函数，我将拥有一个更干净、更可读的控制器，并将许多业务逻辑移到服务中。即:
    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。活动，否则我可能不需要传递channelID: scope。数字作为参数。这样的东西是如何构成的?

您不需要将作用域传递给服务。相反，您移到工厂中的一些作用域变量仍然可以从控制器的作用域访问:

.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'
})
相关文章：