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方法，它会返回 [Object] [Object] 表示从数据库中获取类别

(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

检查此代码

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

Answer 2

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

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

解决这类问题的一种方法是尽可能使其尽可能直观。例如，在a而不是。

上使用ng-repeat

另外一般情况下，如果您要在StackOverflow上寻求帮助，如果您使用示例代码创建JSFiddle或Plnkr，您将获得更多响应。

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

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

2 个答案: