javascript - 带有 promise 的服务中的 Angular "this"符号和数据

Question

让我们切入正题。我有以下服务:

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 就使用了 promise，这意味着我无法访问它并正确设置它。我知道您可以使用 $scope 执行此操作，但我不想使用 $scope。

那么我怎样才能确保我可以访问变量呢？

Answer 1

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

您只需要确保回调中的 this 仍然引用您期望的 this；这里最简单的方法是绑定(bind)回调函数的上下文。

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