javascript - $scope 在 $http 调用中未定义

Question

我的 Angular 代码

angular.module('MyApp').
controller('ProductController', function ($scope, DropDownService) {
    $scope.Product = {};
    $scope.ProductCategoryList = null;
    DropDownService.GetCategory().then(function (d)
    {
        $scope.ProductCategoryList = d.data;
    });
}).
factory('DropDownService', function ($http) {
    var fac = {};
    fac.GetCategory = function() {
        return $http.get('/Product/GetAllCategory');
    };
    return fac;
});

我的服务器端

public JsonResult GetAllCategory()
        {
            
            //List<tblCategory> categories = new List<tblCategory>();
            try
            {
                using(CurtainHomesDBEntities  dc = new CurtainHomesDBEntities())
                {
                     var categories = dc.tblCategory.Select(a => new { a.Id, a.CatagoryName }).ToList();
                     return Json(new { data = categories, success = true }, JsonRequestBehavior.AllowGet);
                }
                
            }
            catch(Exception ex)
            {
                return Json(ex);
            }
        }

我以同样的方式做了很多次。但在 $http 请求后为 $scope.ProductCategoryList 赋值时抛出 js 错误 ReferenceError: $scope is not Define 。这里有什么问题？我尝试了很多方法，但没有找到答案。

我也尝试过这种方式

angular.module('MyApp').
controller('ProductController', function ($scope, $http) {
    $scope.Product = {};
    $scope.LoadCategory = function () {
        $scope.categoryList = null;

        $http.get('/Product/GetAllCategory/')
        .success(function (data) {
            $scope.categoryList = data.data;
        })
        .error(function (XMLHttpRequest, textStatus, errorThrown) {
            toastr.error(XMLHttpRequest + ": " + textStatus + ": " + errorThrown, 'Error!!!');
        })
    };
});

同样的问题。 $范围未定义

Answer 1

您需要注入(inject)$scope以及您的服务

angularModule.controller("ProductController", ["$scope","$http", 'DropDownService', function ($scope, $http, DropDownService) {
    $scope.Product = {};
    $scope.ProductCategoryList = null;
    DropDownService.GetCategory().then(function (d)
    {
        $scope.ProductCategoryList = d.data;
    });
}]);