将服务作为控制器参数传递

Question

我有一个AngularJs控制器，可以从控制器获取类别列表ASP.NET MVC。它工作得很好，这是下面的代码：

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

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

(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;
    });
})();

我的要求是将所有控制器统一起来，如下所示：

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

我相信，我离得足够近，在这里错过了一些东西。我希望有一些建议以正确的方式实施它。谢谢。

更新 1 - 以下代码几乎有效，但它不会将DropDownList与类别数据绑定： 但是使用 alert 方法，它返回 [对象][对象]，这意味着它从数据库中获取类别

(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>

Answer 1

@user8512043 下面是一个带有工作代码的 JSFiddle：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;
    };
})(); 

请注意，看起来代码很好。下拉列表不起作用，因为您将字符串分配给范围变量而不是数组。

解决此类问题的一种技术是使其尽可能直观。例如，在 上使用 ng 重复而不是 .

此外，一般来说，如果你打算在StackOverflow上寻求帮助，如果你使用你的示例代码创建一个JSFiddle或Plnkr，你会得到更多的回应。

最后，如果您要这样做，请模拟服务器调用。这将允许想要回答的人做一些快速实验。

Answer 2

检查此代码

(function () {
'use strict';
angular
    .module('productApp',[])
    .controller('categoryController', categoryController)
    .controller('productController', productController)
    .factory('categoryService', categoryService);
function categoryController($scope, categoryService) {
    $scope.data = "Service: "+categoryService.serviceName+", Controller: categoryController";
};
function productController($scope, categoryService) {
    $scope.data = "Service: "+categoryService.serviceName+", Controller: productController";
};
function categoryService() {
    return {serviceName: "categoryService"};
};})();