Angularjs未定义的错误范围变量答案

【问题标题】：Angularjs undefined err scope variableAngularjs未定义的错误范围变量
【发布时间】：2018-03-03 20:51:13
【问题描述】：

大家好，我在使用 angularjs 时遇到了一些困难。我今天花了一整天的时间试图弄清楚这一点！我对此很陌生，并且真的被困住了，所以希望有人能提供帮助。我收到错误'无法读取未定义的属性'长度'。我的程序有一个对象数组'$scope.products'取自.json文件。我过滤这个数组以仅显示那些产品类别：'特别优惠'..

$scope.specialOffers = $filter('filter')($scope.products,{category:"Special 
Offers"}, true);

然后获取这个新数组的长度并将其传递给我的 randomInt 函数，从而创建一个介于 0 和数组长度之间的随机整数。但由于某种原因，“$scope.specialOffers”显示为未定义。这是完整的控制器代码：

app.controller('ProductsController', ['$scope','$filter', 'productFactory', 
'$location', '$routeParams', 
function ($scope, $filter, productFactory, $location, $routeParams) {

$scope.path;
$scope.category;
$scope.products;
$scope.rand;
$scope.specialOffers;
$scope.id = $routeParams.id;

specifyCategory();
getProducts();

$scope.specialOffers = $filter('filter')($scope.products,{category:"Special Offers"}, true);

$scope.rand = randomInt($scope.specialOffers.length, 0);

function specifyCategory() {
    $scope.path = $location.path();
    if ($scope.path == "/products/woodentoys") {
        $scope.category = "Wooden Toys"
    } else if ($scope.path == "/products/woodenaccessories") {
        $scope.category = "Wooden Accessories"
    } else if ($scope.path == "/products/specialoffers"){
        $scope.category = "Special Offers"
    }
}

function getProducts() {
    productFactory.getProducts()
        .then(function (response) {
            $scope.products = response.data;

        }, function (error) {
            $scope.status = 'unable to load product data ' + error.message;
        });
}

function randomInt(max,min){
    max++;
    return Math.floor((Math.random())*(max-min))+min;
}

}]);

这是我关于堆栈溢出的第一个问题，感谢您的耐心等待非常感谢！

【问题讨论】：

标签： javascript angularjs json angularjs-scope

【解决方案1】：

没有看到实际的错误消息，我的第一个猜测是 $scope.products 在被过滤之前没有设置。看来 getProducts 正在返回一个异步承诺：

function getProducts() {
    productFactory.getProducts()
        .then(function (response) {
           $scope.products = response.data;

        }, function (error) {
           $scope.status = 'unable to load product data ' + error.message;
    });
}

如果您还没有尝试过，请将您对这些数据的访问移到匿名回调函数中。

function getProducts() {
    productFactory.getProducts()
        .then(function (response) {
            $scope.products = response.data;
            $scope.specialOffers = $filter('filter')($scope.products, {category:"Special Offers"}, true);
            $scope.rand = randomInt($scope.specialOffers.length, 0);
        }, function (error) {
            $scope.status = 'unable to load product data ' + error.message;
        });
}

【讨论】：

【解决方案2】：

发生这种情况是因为您获取产品的请求需要一些时间，也就是说，当您尝试访问 $scope.products 而请求尚未完成时会导致显示为未定义

尝试在您的请求回调中应用您的过滤器或使用 $watch 进行研究

【讨论】：