Question

我创建了一个名为paging的工厂，它将为分页返回数字。

expenseApp.factory('paging', function() {
  this.pages = function(min, max, step) {
    if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
  };

我想在我的控制器中调用此工厂

 expenseApp.controller('expenseController', function($scope, $http, paging) {
    $scope.range = function() {
      $scope.answer = paging.range(0, 10, 1);
    }
  });

但此代码无效。我试过了here

var expenseApp = angular.module('expenseApp', []);
expenseApp.factory('paging', function() {
  this.pages = function(min, max, step) {
    if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
  };
  expenseApp.controller('expenseController', function($scope, $http, paging) {
    $scope.pages = function() {
      $scope.answer = paging.range(0, 10,1);
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="MyApp.js"></script>
  <script src="MyCtrl.js"></script>

</head>

<body>
  <div ng-app="expenseApp" ng-controller="expenseController">
    <h1>Hello Plunker!</h1>
    <ul class="pagination">
      <li ng-repeat="a in pages">
        <a ng-click="pagination(a)">{{a}}</a>
      </li>
    </ul>
  </div>
</body>

</html>

Answer 1

var expenseApp = angular.module('expenseApp', []);
expenseApp.factory('paging', function() {
  return {
    pages: function(min, max, step) {
      if (max <= 5) {
        min = 1;
      }
      if (max > 5) {
        min = max - 3;
      }
      step = step || 1;
      var input = [];
      for (var i = min; i <= max; i += step)
        input.push(i);
      return input;
    }
  }
});

expenseApp.controller('expenseController', ['$scope', '$http', 'paging', function($scope, $http, paging) {
  $scope.pages = function() {
    $scope.answer = paging.pages(0, 10, 1);
  }
  $scope.pages();
}]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>

<body>
  <div ng-app="expenseApp" ng-controller="expenseController">
    <h1>Hello Plunker!</h1>
    <ul class="pagination">
      <li ng-repeat="a in answer">
        <a ng-click="pagination(a)">{{a}}</a>
      </li>
    </ul>
  </div>
</body>

</html>

请检查此代码段。

我所做的改变：

<强>的index.html

<script src="MYApp.js"></script>

<ul class="pagination">
      <li ng-repeat="a in answer">
        <a ng-click="pagination(a)">{{a}}</a>
      </li>
</ul>

<强> MyCtrl.js

expenseApp.factory('paging', function() {
  return {
    pages: function(min, max, step) {
      if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
    }
  }
});

expenseApp.controller('expenseController', ['$scope','$http', 'paging', function($scope, $http, paging) {
  $scope.pages = function() {
    console.log(paging)
    $scope.answer = paging.pages(0, 10,1);
  }
  $scope.pages();
}]);

Answer 2

这是因为你收到错误

Error: [$injector:undef] http://errors.angularjs.org/1.6.5/$injector/undef?p0=paging(…)

这意味着您的工厂没有返回任何值。因此，要解决此问题，您可以在工厂中使用此代码

expenseApp.factory('paging', function() {
  var paging = {};
  var range = function(min, max, step) {
    if (max <= 5) {
      min = 1;
    }
    if (max > 5) {
      min = max - 3;
    }
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step)
      input.push(i);
    return input;
  };
  paging.range = range;
  return paging;
});

请注意，var paging = {};是一个JSON对象，它将保存此工厂提供的所有功能，例如range，因此paging.range = range;会向range添加工厂方法range 1}} paging对象的键。然后最终从服务返回此对象。

现在，无论何时使用工厂paging，它都类似于使用JSON对象paging。因此，访问paging.range(0, 10,1)现在将调用工厂方法。

你的plunkr也不起作用，所以这里是工作PLUNKR

的链接

无法在控制器处调用工厂

2 个答案: