Question

大家好日子，

我有一个简单的html，路由，控制器和服务：

HTML：

<div ng-if="skillAmountLevelled() > 0">
   <label> Yep, there's more than 0. </label>
</div>

控制器：

app.controller('levelCalculatorController', ['$scope', '$http', 'skillService', function ($scope, $http, skillService) {
skillService.getSkills().then(function (data) {
    $scope.skills = data;
}, function () {
    console.log("Error loading Skills");
});

$scope.skillAmountLevelled = function () {
    var skillsLevelledTotal = 0;
    var isLevelNotTooHigh = true;
    for (skillIndex = 0; skillIndex < $scope.skills.length; skillIndex++) {
        skillsLevelledTotal = skillsLevelledTotal + $scope.skills[skillIndex].timesLevelled;
    }

    return skillsLevelledTotal;
}
}]);

$scope.skills[skillIndex].timesLevelled是一个int，其中包含技能被平衡的次数。

服务：

app.service('skillService', function ($http) {
    var getSkills = function () {
        return $http.get('Content/Data/skills.json').then(function(response) {
            return response.data;
         });
    };

    return {
         getSkills: getSkills
    }
});

路由：

app.config(function ($routeProvider) {
$routeProvider
    .when("/levelCalculator", {
        templateUrl: "Content/Views/levelCalculator.html",
        controller: "levelCalculatorController",
        controllerAs: "levelCalculator",
        resolve: {
            skills: function (skillService) {
                return skillService.getSkills();
            }
        }
    })
    .otherwise({
        redirectTo: '/'
    });
});

完成所有设置和完成后，它完全按预期执行。它显示了当有超过0个技能且具有等级的文本时。我遇到的问题是它一直在$scope.skillAmountLevelled行的$scope.skills.length函数上抛出“无法读取未定义的属性技能”错误，直到数据从json加载为止。

我仍然是Angular的初学者，我期望路由中的决心摆脱这一点，因为它应该在加载控制器之前将技术服务放在一边。

我是否搞砸了我的实施，或者在if($scope.skills){}中实施skillAmountLevelled这是一件简单的事情吗？

提前谢谢。

Answer 1

在您的路由文件中：

resolve: {
    skills: function (skillService) {
        return skillService.getSkills();
    }
}

...在加载时向控制器注入一个承诺。

当promise成功完成后，resolve属性可以注入您的专用控制器。换句话说，您不必在控制器中getSkills()，因为skills已在您的控制器功能中可用（使用与resolve属性相同的名称）。

app.controller('levelCalculatorController', function ($scope, $http, skillService, skills) {
    $scope.skills = skills;

    [...]
}

那应该可以解决你的问题。

Answer 2

在调用getSkills之前尝试以这种方式初始化$scope.skills = [];。

控制器在加载数据之前抛出错误，即使解决了

2 个答案: