将服务作为控制器参数传递 [英] Pass Service As A Controller Parameter

问题描述

我有一个 AngularJs 控制器，该控制器从 ASP.NET MVC 控制器获取类别列表.它工作正常，下面是下面的代码:

I've a AngularJs controller that gets a list of categories from ASP.NET MVC controller. It works just fine and here is the below code:

productApp.controller('categoryController', function ($scope, categoryService) { //The controller here
    $scope.Categories = null;

    categoryService.GetCategories().then(function (d) {
        $scope.Categories = d.data;

    }, function () {
        alert('Failed');
    });
});

productApp.factory('categoryService', function ($http) { //The product service
    var factory = {};

    factory.GetCategories = function () {
        return $http.get('/Product/GetCategories'); //The ASP.NET MVC controlled defined
    }
    return factory;
});

我正在尝试将其转换为以下内容，并将服务作为控制器参数传递给它，但是它不起作用:

I am trying to convert it to the following passing the service as a controller parameter but it doesn't work:

(function () {
    'use strict';

    angular
        .module('productApp', ['ngMessages'])
        .controller('categoryController', categoryController);

    categoryController.$inject = ['$scope', 'Products'];

    function categoryController($scope, categoryService) {
            $scope.Categories = null;

            categoryService.GetCategories().then(function (d) {
                $scope.Categories = d.data;

            }, function () {
                alert('Failed');
            });
    }

    productApp.factory('categoryService', function ($http) { //The product service
        var factory = {};

        factory.GetCategories = function () {
            return $http.get('/Product/GetCategories'); //The ASP.NET MVC controlled defined
        }
        return factory;
    });
})();

我的要求是使所有控制器统一如下:

My requirement is to get all the controller united as follows:

angular
    .module('productApp')
    .controller('categoryController', categoryController)
    .controller('productController', productController);

我相信，我已经足够亲密，并且这里缺少一些东西.我希望有一些建议以正确的方式实施它.谢谢.

I believe, I am close enough and missing something here. I would expect some suggestions to implement it in the correct way. Thanks.

更新1-以下代码几乎可以正常工作，但是它没有将 DropDownList 与类别数据绑定:但是使用警报方法，它返回 [Object][对象] 表示它从数据库中获取类别

Update 1 - The below code works almost but it doesn't bind the DropDownList with category data: But using alert method, it returns [Object][Object] that means it gets categories from database

(function () {
    'use strict';
    angular
        .module('productApp', [])
        .controller('categoryController', categoryController)
        .factory('categoryService', categoryService);

    categoryController.$inject = ['$scope', 'categoryService'];

    function categoryController($scope, categoryService) {
        $scope.Categories = null;

        categoryService.GetCategories().then(function (d) {
            $scope.Categories = "Service: " + d.data + ", Controller: categoryController";

            alert(d.data); //Here it alert [Object][Object]
        }, function () {
            alert('Failed');
        });
    }

    function categoryService($http) {
        var factory = {};

        factory.GetCategories = function () {
            return $http.get('/Product/GetCategories');
        }
        return factory;
    };
})();  

在视图中:

<div ng-app="productApp" ng-controller="categoryController">
  <select ng-model="saveProducts.ParentId">
    <option value="">----Please Select Category----</option>
    <option ng-repeat="m in Categories" value="{{ m.CategoryId }}">{{ m.Category }}</option>
  </select>
</div>

推荐答案

@ user8512043这是带有工作代码的JSFiddle:

@user8512043 Here is a JSFiddle with the working code: http://jsfiddle.net/luisperezphd/2fvwz6wp/

(function () {
    'use strict';
    angular
        .module('productApp', [])
        .controller('categoryController', categoryController)
        .factory('categoryService', categoryService);

    categoryController.$inject = ['$scope', 'categoryService'];

    function categoryController($scope, categoryService) {
        $scope.Categories = null;

        categoryService.GetCategories().then(function (d) {
            $scope.Categories = d.data;
        }, function () {
            alert('Failed');
        });
    }

    function categoryService($http, $q) {
        var factory = {};

        factory.GetCategories = function () {
            //return $http.get('/Product/GetCategories');
            return $q.when({ data: [
              { CategoryId: 1, Category: "Category 1" },
              { CategoryId: 10, Category: "Category 2" },
              { CategoryId: 20, Category: "Category 3" }
            ]});
        }
        return factory;
    };
})(); 

请注意，看起来代码很好.下拉菜单无效，因为您为范围变量而不是数组分配了字符串.

Note that it looks like code was fine. The drop down wasn't working because you assigned a string to the scope variable instead of an array.

解决此类问题的一种技术是使它尽可能直观.例如，在上使用ng-repeat代替.

One technique to resolve issue like that is to make it as visual as you can. For example use an ng-repeat on a instead of an .

通常，如果您要在StackOverflow上寻求帮助，那么使用示例代码创建JSFiddle或Plnkr将会得到更多的答复.

Also in general if you are going to ask for help on StackOverflow you are going to get a lot more responses if you create a JSFiddle or Plnkr with your sample code.

最后，如果要进行模拟服务器调用.这样，想要回答的人就可以进行一些快速实验.

Finally if you are going to do that mock the server calls. This will allow the person who wants to answer to do some quick experiments.

这篇关于将服务作为控制器参数传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！