Передача в качестве параметра контроллера

У меня есть контроллер 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>

Ответы

Ответ 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-repeat вместо a.

В общем, если вы попросите о помощи в StackOverflow, вы получите гораздо больше ответов, если вы создадите JSFiddle или Plnkr с вашим примером кода.

Наконец, если вы собираетесь делать это, выкрикиваете вызовы сервера. Это позволит человеку, который хочет ответить, сделать несколько быстрых экспериментов.

Ответ 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"};
};})();