Question

我有以下代码抛出错误：我的控制器代码：

App.controller('SelectCustomerController',
    function SelectCustomerController($scope, $location, $resource, customerService) 
    { //DO STUFF}
});

我注入了服务，如下所示：

App.factory('customerService', ['$resource', function ($resource) {
    return $resource('api/customerAPI')
}]);

Service会对我的MVC webapi Get方法进行一次调用。我的 app模块如下：

var tmPromise, App = angular.module('App', ['ngRoute', 'ui.bootstrap', 'angularUtils.directives.dirPagination', 'ngAnimate', 'ngResource'], function () {

});

我的布局，我称之为Bundle文件：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/m")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-color:x#383838;">
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>

        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/services")
    @Scripts.Render("~/bundles/controllers")  
    @Scripts.Render("~/bundles/pagination")
    @RenderSection("scripts", required: false)
</body>
</html>

收集服务后，服务将添加到服务包的布局中。

我尝试重新安排脚本名称etgc的所有内容都会产生新的错误。这个产生：

错误：[ng：areq] Argument＆＃39; SelectCustomerController＆＃39;不是函数，有字符串

我想将我的服务注入我的控制器，所以我可以调用我的webapi来获取JSON并将其绑定到我的$ scope.list来显示。更多的页面也将使用我的webAPI做类似的事情，但由于某些原因，我似乎无法在我当前的实现中掌握AngularJS依赖注入。

那么这个问题是什么？我忽略了一些简单的东西？如果您需要其他信息，请告诉我并更新问题。

更新：1）

Praveen Singh给出了一个删除错误的答案，但是我的控制器逻辑中出现了一个新的错误，因为新的方式我声明了我的控制器及其依赖性：

$scope.$watch("currentPage + numPerPage", function () {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
});

这个函数是我列表中的一部分，错误是：

$ scope。$ watch不是函数

Answer 1

尝试像这样声明你的控制器：

App.controller('SelectCustomerController',
    ['$scope', '$location', '$resource', 'customerService',
    function($scope, $location, $resource, customerService) {
}]);

Answer 2

下面是控制器（myController）的代码，我们将服务依赖作为myService添加。要在某些参数上添加监视，请记住将$ scope添加为依赖项。在下面的控制器中，我们在watchString上添加了watch。就我而言，我正在关注下拉值。在我的情况下，该服务正在调用另一个服务，用于api调用，这在我的应用程序中很常见。

(function () {
    var module = angular.module('myModule', [
        'dependant-module-1',
        'dependant-module-2'
    ]);

    module.controller('myController', [
    '$scope', 'myService',
    function ($scope, myService) {

        myService.getData($scope);

        $scope.$watch('watchString', function (newValue, oldValue) {
            //Logic on watch
        });
    }
    ]);

    module.service('myService', [
    'serverDataHelper'
    function (serverDataHelper) {
        this.getData = function ($scope) {
            var params = {
                param1: 1,
                param2: 2
            };
            var myDataPromise = serverDataHelper.getData('api end point', params);

            myDataPromise.then(function (serverResponse) {
                if (serverResponse.data != null) {
                    $scope.myData = serverResponse.data;
                } else {
                    $scope.myData = null;
                }
            });

            //OR
            return myDataPromise;
        };
    }]);

})();

您可以从服务返回承诺，也可以将范围对象作为参数传递，并将响应数据分配给范围。

如果您需要进一步的帮助，请告诉我。

AngularJS服务进入控制器

2 个答案: