javascript - 从 Controller 向 Angular 工厂传递参数

Question

我无法将参数从 Angular Controller 传递到工厂。谁可以帮我这个事？它可以在不传递参数的情况下工作，但是当我传递它时它就不行了。

var app = angular.module('employee', ['ui.grid', 'ui.grid.saveState', 'ui.grid.selection', 'ui.grid.cellNav', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.pinning', 'ui.bootstrap', 'ui.grid.autoResize','ui.grid.pagination']);

app.controller('EmpCtrl', ['$scope', '$http', '$interval', '$modal', '$log', 'gridService', function ($scope, $http, $interval, $modal, $log, gridService) {
    $scope.LoadNextPage = gridService.LoadNextPage("5");
}]);

var gridService = function ($http, $rootScope) {
    return {
        LoadNextPage: function (hh) {
            alert(hh);
        },
        gridOptions:gridOptions
    };
};

app.factory('gridService', ['$http', '$rootScope', gridService]);

这就是我在 View 中使用它的方式

<span id="pcNext"
      class="glyphicon glyphicon-step-forward"
      ng-click="LoadNextPage()">
</span>

Answer 1

问题出在你的 Controller 上:

$scope.LoadNextPage = gridService.LoadNextPage("5");

这意味着您的 LoadNextPage 不是函数，而是调用服务中的函数的结果。哪个顺便说一句不返回任何东西，而只是显示一个警报。但在您看来，您正在使用 LoadNextPage 作为函数调用...

将其更改为此，这样您的 Controller 的 LoadNextPage 将成为您可以从 View 中调用的函数。

$scope.LoadNextPage = gridService.LoadNextPage;

在你看来:

<span id="pcNext"
      class="glyphicon glyphicon-step-forward"
      ng-click="LoadNextPage(5)">
</span>

这应该有效。

Note: I suspect that your gridOptions are defined somewhere outside of scope of your code that you provided in the question so that it doesn't throw and error because of the missing (likely) object. So I considered this a typo in your code and not the actual problem.

不想在您的 View 中使用参数？

没问题。您可以创建包装函数或将其绑定(bind)到代码中的特定参数:

// wrap
$scope.LoadNextPage = function() {
    return gridService.LoadNextPage("5");
};

// bind
$scope.LoadNextPage = gridService.LoadNextPage.bind(this, 5);

或者烘焙您服务中的数字...