从控制器向 Angular 工厂传递参数答案

【问题标题】：Passing Parameter to Angular Factory from controller从控制器向 Angular 工厂传递参数
【发布时间】：2016-01-13 11:05:41
【问题描述】：

我无法将参数从角度控制器传递到工厂。谁可以帮我这个事？它无需传递参数即可工作，但当我传递它时却没有。

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

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

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

【问题讨论】：

当我点击按钮时传递参数时不起作用..

标签： javascript angularjs mvvm

【解决方案1】：

问题出在你的控制器上：

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

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

将其更改为此，以便您的控制器的 LoadNextPage 将成为您可以从视图中调用的函数。

$scope.LoadNextPage = gridService.LoadNextPage;

在你看来：

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

这应该可行。

注意：我怀疑您的 gridOptions 是在您在问题中提供的代码范围之外的某个地方定义的，因此它不会抛出错误因为缺少（可能的）对象。所以我认为这是您代码中的错字，而不是实际问题。

不希望参数出现在您的视图中？

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

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

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

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

【讨论】：

【解决方案2】：

这里的问题是 gridOptions:gridOptions 未定义会引发错误。从factory 中删除,gridOptions:gridOptions。

检查 sn-p 的工作代码并与您的代码进行比较。

var app = angular.module('employee', []);
app.controller('EmpCtrl', ['$scope', 'gridService', function ($scope, gridService) {
 $scope.clickMe = function() {
   $scope.LoadNextPage = gridService.LoadNextPage("5");
 }
}]);
var gridService = function() {
  return {
    LoadNextPage: function (hh) {
     alert(hh);
   }
 };
};
app.factory('gridService', ['$http', '$rootScope', gridService]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="employee" ng-controller="EmpCtrl">
  <button ng-click="clickMe()">Button</button>
</div>

【讨论】：

【解决方案3】：

你没有定义 gridOptions 函数请看这个链接：

angular.module("myApp", []).controller("myCon", function($scope, $interval, gridService){

  $scope.LoadNextPage = gridService.LoadNextPage("5");
}).factory('gridService', ['$http', '$rootScope', gridService]);

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

see this link

【讨论】：