角度“this”符号和来自服务的数据，带有承诺

Angular "this" notation and data from service with a promise

本文关键字：数据 承诺 服务 this 符号 角度      更新时间：2023-09-26

所以让我们切入案例。 我有以下服务：

feedBackModule.factory("feedbackSkillService", function ($q, $filter, Query) {
    var skills = [];
    return {
        getSkills: function () {
            var d = $q.defer();
            if (skills.length <= 0) {
                Query.api2({
                    method: 'GET',
                    route: 'feedback/skill'
                }).then(function (result) {
                    skills = result;
                    d.resolve(result);
                });
            }
            else {
                d.resolve(skills);
            }
            return d.promise;
        },
        putSkill: function (skill) {
            skills.push(skill);
        },
        deleteSkill: function (skill) {
            var index = skills.indexOf(skill);
            Query.api2({
                method: 'DELETE',
                route: 'feedback/skill',
                params: {id: skill.id}
            });
            skills.splice(index, 1);
        },
        editSkill: function (skill) {
            Query.api2({
                method: 'PUT',
                route: 'feedback/skill',
                params: {id: skill.id},
                data: {skill: skill}
            });
        }
    }
});

以及以下controller：

    feedBackModule.controller('createCollectionController', ['Query', '$modalInstance', 'feedbackSkillService', 'feedbackCollectionService', function (Query, $modalInstance, feedbackSkillService, feedbackCollectionService) {
    this.collection = {};
    this.skills = [];
    feedbackSkillService.getSkills().then(function (result) {
        this.skills = result;
    });
    this.createSkill = function () {
        Query.api2({
            method: 'POST',
            route: 'feedback/skill',
            data: {skill: this.skill}
        }).then(function (result) {
            feedbackSkillService.putSkill(result);
        });
        $modalInstance.dismiss('cancel');
    };
    this.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

如您所见，我正在尝试从feedbackSkillService中获取技能

但是，由于这在返回后使用承诺，因此this.skill超出了范围，这意味着我无法访问它并正确设置它。我知道你可以用$scope做到这一点，但我不想使用$scope.

那么如何确保我可以访问该变量呢？

feedbackSkillService.getSkills().then(function (result) {
    this.skills = result;
}.bind(this));
// ^^^^^^^^

你只需要确保回调中的this仍然引用你期望的this;这里最简单的方法是bind回调函数的上下文。

请注意，您可能仍存在异步计时问题，并且在您调用this.createSkill时，result可能尚未返回。

相关文章：